切换CSS3动画

Question

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

当我尝试通过添加隐藏栏类来隐藏侧边栏和CSS3 Transition属性时，它完美地工作。但这是一个切换，当我再次展示时，没有转换。菜单只是快照。

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

任何人都可以建议如何切换侧边栏到可见性以及如何具有过渡属性？

我附上一个小提琴作为例子。

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

Answer 1

你需要做的几件事情：因为所有的规则已经在CSS中使用ID选择应用

• ，类选择都没有效果，如CSS具体它有低点可以覆盖在id下指定的先前规则。所以你需要添加!important。 http://htmldog.com/guides/css/intermediate/specificity/了解更多有...

• 你需要把white-space:nowrap;作为第一个div的文/内容将卷起的股利将获得小。

检查出来>>>

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

Answer 2

你并不需要一个hide类可言，jQuery有真棒内置在做同样的事情像.toggle()和.slideToggle功能！

的.toggle

$("a#menu-trigger").click(function() { 
    $("#page-sidebar").toggle("fast"); 
    $("#page-content").toggleClass("hidebar"); 
}); 

Here's an example另外，要转变适用于#page-content，不#page-content.hidebar所以它转换既扩张和收缩

如果你仍然想使用.hide做类不改变jQuery或HTML，你可以做到这一点this way，通过切换宽度和高度

R对于elevant CSS：

.hide {height:0px; width:0px; color:transparent;} 
#page-sidebar {width: 230px; float:left; transition: all 0.3s ease;}