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

좋아, 내가 그것을 어떻게 관리, 그래서 내가 속임수 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(); 
        }); 
       } 
      } 
     });