Question

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

我已经使用css动画旋转十字架并显示子菜单，但是我需要它才能很好地滑出幻灯片而不仅仅是出现。从显示无，到显示块似乎没有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");
     });
    });

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

jQuery切换不触发css动画？

1 个答案: