我正在尝试制作一个动画切换侧边栏。
当我尝试通过添加 hidebar 类来隐藏带有 CSS3 Transition 属性的侧边栏时,效果很好。但这是一个切换,当我再次显示它时,没有过渡。菜单突然弹出。
#page-content.hidebar {
transition: margin 0.3s ease;
margin-left: 0;
}
谁能建议我在将侧边栏也切换为可见性时如何拥有过渡属性?
我附上一个 fiddle 作为例子。
最佳答案
你需要做几件事:
由于在 css 中使用 id 选择器应用了所有规则,因此您的类选择器没有效果,因为在 css 特异性方面它具有低分来覆盖之前在 id 下指定的规则。所以你需要添加
!important
。 <强> http://htmldog.com/guides/css/intermediate/specificity/ 在那里了解更多...您需要放置
white-space:nowrap;
,因为第一个 div 的文本/内容会随着 div 变小而 curl 。
一探究竟>>>
关于css - 切换 CSS3 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18049125/