CSS 转换在toggleClass() 之后不起作用

我创建了一个切换菜单，如图所示这个演示 http://jsfiddle.net/85Ryan/Hrsdw/1/.

我添加了一个CSS过渡效果div.nav-menu，我用过max-height:0; to max-height:480px;.

当我单击菜单切换以显示菜单时，过渡效果很好。但是，当我单击菜单切换再次隐藏菜单时，转换不起作用。

我做错了什么？

你对 CSS 过渡的理解是错误的。他们添加或删除类时不要设置动画，只有当你更改 CSS 属性. 并且您直接添加和删除类。

这是您的解决方案：

$( '.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' );
});

更新了小提琴 http://jsfiddle.net/Hrsdw/7/