CODEWITHSUNDEEP
jquerycssanimation
user4630
user4630

Reputation: 633

jQuery toggle not triggering css animation?

I’ve made a little toggle button which you click and it opens up a hidden menu, whilst rotating a cross.

I’ve got the cross to rotate using css animation and the sub menu appears, but i need it to animate slide out nicely rather than just appearing. The going from display none, to display block doesn’t seem to animate with css, is there anyway round this?

Or does css animation not work on the display style?

I’ve a 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 here..

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

Upvotes: 4

Views: 1418

Answers (1)

DaniP
DaniP

Reputation: 38252

You can't animate display property what you need is to animate the 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;
 }

Check this Demo Fiddle

Upvotes: 3

Related Questions