3

I created a toggle-menu, as shown in this demo.

I addded a css transition effect for div.nav-menu, and i used max-height:0; to max-height:480px;.

When I click the menu toggle to show the menu, the transition works well. But when I click the menu toggle to hide the menu again the transition doesn't work.

What did I do wrong?

meetar
  • 7,443
  • 8
  • 42
  • 73
85Ryan
  • 115
  • 2
  • 8

3 Answers3

5

You are wrong about CSS Transitions. They do not animate when you add or remove class, It will only animate when you change the CSS properties. And You are directly adding and removing classes.

Here is your solution:

$( '.menu-toggle' ).on( 'click', function() {
    if(nav.hasClass('toggled-on')) {
       menu.css('maxHeight', 0);
       //^ Here is changed the 'max-height` first so that the 
       //  Transition animation will trigger first
    }
    else menu.css('maxHeight', '480px'); 
         // ^ If not I changed it back to 480px;
} );

// Next I bind on the transaction end event of the element to toggle class
// After it finishes the transistion

menu.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
    nav.toggleClass( 'toggled-on' );
});

Updated Fiddle

Starx
  • 77,474
  • 47
  • 185
  • 261
  • thanks! but it still has a problem! because you add `max-height=0;` to the `.nav-menu` , when click the toggle to hide the menu, the style still exists. so it can only run one cycle, and not keep doing the loop. – 85Ryan Jul 08 '13 at 02:55
  • Thank you for helping me modify the error in my question, my english is very poor! :) – 85Ryan Jul 08 '13 at 03:05
  • @85Ryan, Please see my updated answer. I have updated your `nav-menu ul` styles to show without the toggled-on class and now everything is working as it should. :) – Starx Jul 08 '13 at 03:28
  • I got it! Thanks and you missed a `{` – 85Ryan Jul 08 '13 at 04:30
  • @Starx I guess you are not 100% right about `They **do not animate when you add or remove class**`. Because if you change the class, and the new class change CSS Propertie, the `transition` will work as well. Look this > [link](http://jsfiddle.net/Hrsdw/30/). I just change a little bit his CSS. – Éderson T. Szlachta Jul 18 '14 at 12:58
  • you are saying adding class does not trigger transition, but it does, the problem is removing class does not trigger . – Parviz Pirizade Jul 07 '21 at 16:09
2

There is a much easier way to get the effect you're after.

Working Example

js 

$(function() {
    $('.menu-toggle').click(function(){
        if($('.nav-menu').is(':hidden')){ // check to see if menu is hidden
            $('.nav-menu').slideDown();}  // if so slide down
        else{$('.nav-menu').slideUp();}   // else slide up
    });
});

css

html {
    font-size: 100%;
    overflow-y: scroll;
}
body {
    max-width: 860px;
    margin: 0 auto;
    font-family: Helvetica, sans-serif;
}
.main-navigation {
    clear: both;
    min-height: 45px;
    margin-top: 30px;
    position: relative;
}
.menu-toggle {
    cursor: pointer;
    display: inline-block;
    font: bold 16px/1.3;
    margin: 0;
    padding: 10px;
    color: #fff;
    background-color: #1e1e1e;
}

.nav-menu {

    margin: 0;
    background-color: #1e1e1e;
    display: none;
    overflow: hidden;
}

.nav-menu ul {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}
.nav-menu li {
    display: block;
    padding: 10px;
}
.nav-menu li a {
    display: block;
    padding:10px;color:#fff;line-height:1;
    text-decoration: none;
}
.nav-menu li a:hover,.nav-menu li a:focus{background:#272727;}
.toggled-on li a:active{background:#2A8A15;}

API for .slideUp() and API for .slideDown()

apaul
  • 16,092
  • 8
  • 47
  • 82
  • 2
    Do you understand the question is about CSS Transition? – Starx Jul 08 '13 at 02:50
  • @Starx Yes I understand the question, just thought the op may be interested in a short cut to the same goal. Also your solution only seems to work once... Try clicking the menu again after its been hidden. – apaul Jul 08 '13 at 02:55
  • You seem to be wrong about me. I was not commenting on your question to make my answer right. :) – Starx Jul 08 '13 at 03:09
  • @Starx Its all good, check out this meta post for a good laugh on the subject http://meta.stackexchange.com/a/179567/217863 – apaul Jul 08 '13 at 03:34
  • Also, If i thought your answer was wrong, I would have downvoted you. You are correct dude!! :) – Starx Jul 08 '13 at 03:37
0

Instead of using max-height use height

.nav-menu {
    margin: 0;
    background-color: #1e1e1e;
    height:0;
    display: block;
    clear: both;
    overflow: hidden;
    -moz-transition:all 350ms cubic-bezier(.42,0,.58,1);
    -ms-transition:all 350ms cubic-bezier(.42,0,.58,1);
    -o-transition:all 350ms cubic-bezier(.42,0,.58,1);
    -webkit-transition:all 350ms cubic-bezier(.42,0,.58,1);
    transition:all 350ms cubic-bezier(.42,0,.58,1);
}
.toggled-on .nav-menu {
    display: block;
    height:480px;
}
Hitesh
  • 132
  • 1
  • 9