Question

我有一个jQuery，它在鼠标输入时添加动画类，当鼠标离开元素时添加另一个类，基本上我想要In and 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();
                    });
                }
            }
        });

进入和离开jQuery的CSS动画

1 个答案: