jQuery切换不触发css动画？答案

【问题标题】：jQuery toggle not triggering css animation?jQuery切换不触发css动画？
【发布时间】：2014-10-20 21:26:17
【问题描述】：

我制作了一个小切换按钮，您单击它会打开一个隐藏菜单，同时旋转一个十字。

我已经使用 css 动画让十字旋转并出现子菜单，但我需要它来很好地动画幻灯片而不是仅仅出现。从 display none 到 display block 似乎没有用 css 动画，这有什么问题吗？

还是css动画对显示样式不起作用？

我有一个小提琴here

<nav class="filter_nav inner">
    <ul class="subnav">
        <li>Text</li>
         <li>Text</li>
         <li>Text</li>
         <li>Text</li>
         <li>Text</li>
    </ul>
    <ul class="toggleNavOuter">
        <li class="toggleNavButton">+</li> 
        <li>Filter</li>
    </ul>

</nav>

这里是JS..

    $(function(){
     $(".toggleNavOuter").click(function () {
        $(".subnav").toggleClass("active");
        $(".toggleNavOuter").toggleClass("active");
        $(".toggleNavButton").toggleClass("active");
     });
    });

【问题讨论】：

希望你的小提琴没有瑕疵。 onclick 函数很好用，你的问题是什么。
交叉旋转。对于显示/隐藏动画，您可以尝试 .toggle() 设置持续时间。
您无法将过渡添加到显示 :) 尝试使用宽度和不透明度来代替，您无法使用 css3 过渡从显示无到阻塞 :)

标签： jquery css animation

【解决方案1】：

您无法为display 属性设置动画，您需要为width 设置动画。

一个选项可以是：添加width:0 而不是display:none

 .filter_nav .subnav {
     width:0;
     transition: width 0.8s ease-in-out 0s;
 }

然后在active 上放置一些固定宽度：

 .filter_nav .subnav.active {
     width:300px;
 }

查看Demo Fiddle

【讨论】：

谢谢你，我没有意识到你不能动画显示属性，他们应该改变它。谢谢大家的帮助。
Np @user4630 很高兴为您提供帮助...请记住，如果您想要一些动态宽度，也可以使用 jquery 为宽度设置动画，也可以使用 jquery 来计算值。