我创建了一个侧边栏,当屏幕变小时它会折叠。然后出现一个按钮来打开/关闭它。我使用过渡以一种很好的方式隐藏/显示侧边栏。
侧边栏<div>
隐藏了效果,但侧边栏的内容消失了,没有任何效果。当我仔细观察打开行为时,我可以看到菜单首先完全出现,然后侧边栏出现及其效果。我也想要对菜单内容的影响。
一切都在布局中。css 和一些代码在 layout.js 中
演示:已移除
我创建了一个侧边栏,当屏幕变小时它会折叠。然后出现一个按钮来打开/关闭它。我使用过渡以一种很好的方式隐藏/显示侧边栏。
侧边栏<div>
隐藏了效果,但侧边栏的内容消失了,没有任何效果。当我仔细观察打开行为时,我可以看到菜单首先完全出现,然后侧边栏出现及其效果。我也想要对菜单内容的影响。
一切都在布局中。css 和一些代码在 layout.js 中
演示:已移除
添加transition: left .3s ease;
到#sidebar-nav。
添加过渡到侧边栏导航就是这样!
#sidebar-nav{
-webkit-transition: all 0.2s ease-in-out;// I am adding webkit please add the rest yourself.
}
侧边栏的堆叠顺序在内容之上。你可以通过改变来改变它:
#sidebar-nav {
z-index:0;
}