切换CSS3动画

Question

我正在尝试制作一个切换侧边栏，用于设置动画。

当我试图通过添加一个hidebar类来隐藏带有CSS3Transition属性的侧边栏时，它非常有效。但这是一个切换，当我再次展示它时，没有过渡。菜单刚刚弹出。

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

当我将侧边栏切换到可见性时，有人能建议我如何使用transition属性吗？

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

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

Answer 1

您需要做几件事：

• 由于所有规则都是使用css中的id选择器应用的，所以类选择器没有效果，因为在css特定性中，它有低点可以覆盖在id下指定的以前的规则。因此，需要添加!importanthttp://htmldog.com/guides/css/intermediate/specificity/在那里了解更多信息。。。

• 您需要将white-space:nowrap;设置为第一个div的文本/内容会随着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");
});

此外，您希望将转换应用于#page-content，而不是#page-content.hidebar，以便它转换扩展和收缩

如果您仍然想使用.hide类而不更改jQuery或HTML，可以通过切换的宽度和高度来实现

相关CSS：

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