jQuery动画在一段时间后中断

Question

当我呆在我的部门时，如果我出去再进去，动画就不能再工作了.所以，就像当我在动画播放的时候，当我退出并重新回到原处时，它不会再次启动动画。

HTML：

<div class="ani-bounce-slow" style="height: 200px; width: 50%; background-color: #3c3; ">
    <p> This is a bouncing Text!</p>
</div>

CSS：

.bounce-slow {
animation: bounce 3s;
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

jQuery：

$(document).ready(function () {
$('.ani-bounce-slow').mouseenter(function () {
    $(this).addClass('bounce-slow');
});
$('.ani-bounce-slow').one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
    function (e) {
        $(this).removeClass('bounce-slow');
    }
);
});

小提琴在这里

Answer 1

我认为您的问题在于您使用的是一()函数而不是关于()。

更改：

$('.ani-bounce-slow').one('webkitAnimationEnd...

至：

$('.ani-bounce-slow').on('webkitAnimationEnd...

.one(事件、数据、处理程序)将处理程序附加到元素的事件。每个事件类型的每个元素最多只执行一次。 .on(事件、选择器、处理程序)将的事件处理程序函数(一个或多个事件)附加到选定的元素。

Answer 2

看起来你只需要撕开类来停止动画的休假，只需在enter时将它添加回来。这将使动画每次都会发生。

$('.ani-bounce-slow').mouseenter(function () {
    $(this).addClass('bounce-slow');
});
$('.ani-bounce-slow').mouseleave(function () {
    $(this).removeClass('bounce-slow');
});

如果您想让动画继续鼠标离开，那么您需要检查动画的完成情况，或者为动画的长度设置一个定时器。