jQueryを入力して終了するCSSアニメーション

Question

マウス入力時にアニメーションクラスを追加するjQueryがあり、マウスが要素を離れるときに別のクラスを追加します。基本的にはIn/Outアニメーションが必要です。私はフェイディングを達成しています。アニメーションでは、マウスで離れるとアニメーションなしで要素が消えます。したがって、アニメーションは表示されますが、放棄は表示されません。

のjQuery：アニメーション化しようとしているイム

$('.menu > ul > li').on({ 
      mouseenter: function() { 
       if (getWindowWidth() >= responsiveBreakpoint) { 
        $(this).children('ul').removeClass('fadeOutUp').addClass('fadeInDown'); 
       } 
      }, 
      mouseleave: function() { 
       if (getWindowWidth() >= responsiveBreakpoint) { 
        $(this).children('ul').removeClass('fadeInDown').addClass('fadeOutUp'); 
       } 
      } 
     }); 

CSS

@keyframes fadeInDown { 
    from { 
    display: none; 
    opacity: 0; 
    transform: translate3d(0, -20px, 0); 
    } 

    to { 
    display: block; 
    opacity: 1; 
    transform: none; 
    } 
} 

.fadeInDown { 
    animation: .2s ease; 
    animation-name: fadeInDown; 
} 

@keyframes fadeOutUp { 
    from { 
    display: block; 
    opacity: 1; 
    transform: none; 
    } 

    to { 
    display: none; 
    opacity: 0; 
    transform: translate3d(0, -20px, 0); 
    } 
} 

.fadeOutUp { 
    animation: .2s ease; 
    animation-name: fadeOutUp; 
} 

そして要素は次のようにスタイリングされています

> ul { 
     display: none; 
     position: absolute; 
     z-index: 99; 
     left: 0; 
     width: 100%; 
     background: $hover-and-dropdown-bg; 
} 

Answer 1

[OK]をので、私はそれを行うために管理、私はだまさ表示プロパティを持つアニメーションを持つCSS。

jqueryの

$('.menu > ul > li').on({ 
      mouseenter: function() { 
       if (getWindowWidth() >= responsiveBreakpoint) { 
        $(this).children('ul').css('display', 'block').removeClass('fadeOutUp').addClass('fadeInDown'); 
       } 
      }, 
      mouseleave: function() { 
       if (getWindowWidth() >= responsiveBreakpoint) { 
        $(this).children('ul').removeClass('fadeInDown').addClass('fadeOutUp').delay(200).queue(function (next) { 
         $(this).css('display', 'none'); 
         next(); 
        }); 
       } 
      } 
     });