切换CSS3动画

Question

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

当我尝试通过添加hidebar类来隐藏带有CSS3 Transition属性的侧边栏时，它可以完美地工作。但这是一个切换，当我再次展示时，没有过渡。菜单刚刚弹出。

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

当我将侧边栏切换到可见性时，有人可以建议我如何获得过渡属性吗？

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

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

Answer 1

您根本不需要hide类，jQuery具有很棒的内置功能，可以执行.toggle()和.slideToggle这样的操作！

.toggle

的

Here's an example

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

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

如果您仍然希望使用.hide类而不更改jQuery或HTML，则可以通过切换宽度和高度来this way进行此操作

相关的CSS：

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

Answer 2

你需要做几件事：

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

• 你需要把white-space:nowrap;作为第一个div的文本/内容卷曲，因为div会变小。

检查出＆gt;＆gt;＆gt;

<强> http://jsfiddle.net/techsin/dxYCm/5/