css - 切换 CSS3 动画

标签 css css-transitions

我正在尝试制作一个动画切换侧边栏。

当我尝试通过添加 hidebar 类来隐藏带有 CSS3 Transition 属性的侧边栏时,效果很好。但这是一个切换,当我再次显示它时,没有过渡。菜单突然弹出。

#page-content.hidebar   {
transition: margin 0.3s ease;
margin-left: 0;
}

谁能建议我在将侧边栏也切换为可见性时如何拥有过渡属性?

我附上一个 fiddle 作为例子。

http://jsfiddle.net/dxYCm/1/

最佳答案

你需要做几件事:

  • 由于在 css 中使用 id 选择器应用了所有规则,因此您的类选择器没有效果,因为在 css 特异性方面它具有低分来覆盖之前在 id 下指定的规则。所以你需要添加!important。 <强> http://htmldog.com/guides/css/intermediate/specificity/ 在那里了解更多...

  • 您需要放置 white-space:nowrap;,因为第一个 div 的文本/内容会随着 div 变小而 curl 。

一探究竟>>>

http://jsfiddle.net/techsin/dxYCm/5/

关于css - 切换 CSS3 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18049125/

相关文章:

jquery - 不同浏览器大小的不同 CSS

javascript - 如果显示等于具有平滑动画 JQuery 的 block ,则样式特定元素

javascript - 基于 Javascript if else 语句更改样式表

jquery - 如何向导航栏添加过渡?

jquery - 如何使用 bxslider 在当前幻灯片中应用一个类?

html - css transform3d 和堆叠顺序

html - 页面加载时的不透明度过渡不会在加载时启动

html - 将悬停图像上的文本移至左侧

css - 悬停时的线性渐变底部边框

internet-explorer - 尝试一个简单的 css3 转换,不在 IE 中工作