平滑折叠侧边栏答案

【问题标题】：Collapsing sidebar smoothly平滑折叠侧边栏
【发布时间】：2015-01-05 06:04:11
【问题描述】：

我创建了一个侧边栏，当屏幕变小时它会折叠。然后出现一个按钮来打开/关闭它。我使用了一个过渡来以一种很好的方式隐藏/显示侧边栏。

侧边栏<div> 隐藏了效果，但侧边栏的内容消失了，没有任何效果。当我仔细观察打开行为时，我可以看到菜单首先完全出现，然后侧边栏出现及其效果。我也想要菜单内容的效果。

一切都在布局中。 css 和一些代码在 layout.js 中

演示：已删除

【问题讨论】：

【解决方案1】：

将transition: left .3s ease; 添加到#sidebar-nav。

【讨论】：

【解决方案2】：

添加过渡到侧边栏导航就是这样！

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

【讨论】：

【解决方案3】：

侧边栏的堆叠顺序在内容之上。你可以通过改变来改变它：

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

【讨论】：