jQuery切换未触发CSS动画？

Question

我做了一个小的切换按钮，你点击它会打开一个隐藏菜单，并旋转一个十字。我已经使用CSS动画使这个十字旋转并显示子菜单，但我需要它以漂亮的方式滑动出来，而不是只是出现。从display none到display block似乎无法使用CSS进行动画处理，有没有什么办法可以解决呢？或者CSS动画不能在display样式上工作吗？这里有一个fiddle 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");
     });
    });

- user4630

---

希望你的代码没有漏洞。onclick函数很好用，你遇到了什么问题？ - Benjamin

交叉旋转。为了显示/隐藏动画，您可以尝试使用.toggle()并设置持续时间。 - Regent

你不能给display属性添加过渡效果 :) 试着使用width和opacity代替，你不能使用CSS3过渡效果从display:none到block进行动画效果 :) - Bojan Petkovski

Answer 1

您不能通过动画 display 属性，您需要的是动画 width。

• One option can be this: Add width:0 instead of display:none

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

  And then on active place some fixed width:

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

请查看此演示Fiddle

。

- DaniP

---

谢谢，我没有意识到无法对显示属性进行动画处理，他们应该改变这种情况。感谢大家的帮助。 - user4630

Np @user4630，很高兴能帮忙...记住你也可以使用jQuery来动态改变宽度，如果你想要一些动态的宽度，你也可以使用jQuery来计算值。 - DaniP