css - 切换 CSS3 动画

Question

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

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

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

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

我以小提琴为例。

score 2 · Accepted Answer

你根本不需要一个hide类，jQuery 有很棒的内置功能，可以做同样的事情，比如.toggle()和.slideToggle！

这是一个例子.toggle

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

此外，您希望将过渡应用于#page-content，而不是#page-content.hidebar使其同时过渡扩展和收缩

如果您仍然想使用不更改 jQuery 或 HTML 的类来执行此.hide操作，您可以通过切换宽度和高度来执行此操作

相关的CSS：

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

score 2 · Accepted Answer

你需要做几件事：

由于所有规则都已使用 css 中的 id 选择器应用，因此您的类选择器没有效果，因为在 css 特异性中，它具有覆盖之前在 id 下指定的规则的低点。所以你需要添加!important. http://htmldog.com/guides/css/intermediate/specificity/在那里了解更多...
您需要将white-space:nowrap;第一个 div 的文本/内容放入，因为 div 会变小。

看看吧>>>

2 回答 2