平滑摺疊邊欄

Question

我創建了一個邊欄，當屏幕變得很小時會摺疊。一個按鈕然後顯示打開/關閉它。我使用了一個轉換來以不錯的方式隱藏/顯示側邊欄。

側邊欄<div>隱藏效果，但側邊欄的內容只是消失沒有任何影響。當我仔細觀察開場行爲時，我可以看到菜單首先出現，然後側欄出現效果。我也想要菜單內容的效果。

一切都在佈局。 CSS和一點點的代碼是在layout.js

演示：去除

預期的效果：http://detail.herokuapp.com/index.html

Answer 1

將transition: left .3s ease;加到＃sidebar-nav。

我建議你閱讀http://www.sitepoint.com/css3-sliding-menu/

Answer 2

側邊欄的堆疊順序是內容之上。你可以改變：

#sidebar-nav { 
z-index:0; 
} 

Answer 3

添加過渡到側邊欄導航就是這樣！

#sidebar-nav{ 
-webkit-transition: all 0.2s ease-in-out;// I am adding webkit please add the rest yourself. 
}