平滑折叠边栏

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. 
}