jQuery 切换不触发 css 动画？

Question

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

我已经使用 css 动画让十字旋转并出现了子菜单，但我需要它以动画方式很好地滑出而不是仅仅出现。从 display none 到 display block 似乎没有使用 css 动画，这有什么办法吗？

或者 css 动画在显示样式上不起作用？

我有一把 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");
     });
    });

Answer 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