javascript - サイドバーをスムーズに折りたたむ

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 にトランジションを追加する

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

Answer 3

サイドバーの重ね順はコンテンツの上です。次のように変更することで変更できます。

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