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

Question

我创建了一个切换菜单,就像DEMO一样.

我想补充的CSS过渡效果div.nav-menu,我使用max-height:0;到max-height:480px;.

单击菜单切换以显示菜单时,转换工作正常.但是,当我单击菜单切换以再次隐藏菜单时,转换现在不起作用.

我做错了什么？

Answer 1

你错了CSS Transitions.添加或删除类时,它们不会设置动画,只有在更改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' );
});

更新小提琴