使用 jQuery 检测 animate.css 的动画和动画状态结束

Question

我正在使用 animate.css 为我的网页上的几个块设置动画。

<a href="#" class="clicktoanimate">Click to animate</a>
<div class="div-to-animate">
    some content...
</div>

$('.clicktoanimate').click(function(direction){
    $('.div-to-animate').addClass('animated fadeIn');
});

动画就是这样。

但是现在我想在动画中和动画完成时做一些任务。

所以，为了检查它是否正在动画，我使用了以下条件

if ($('.div-to-animate').hasClass('animated')) {
   // do something 
}

这很好，但并非适用于所有情况。因为动画 class 在转换后没有被删除。

所以，我想我现在唯一需要解决的难题是：如何在动画完成后移除动画class。

Answer 1

您可以侦听 animationend 事件并在它触发时移除 class：

$(".div-to-animate").on("animationend", function() {
    $(this).removeClass("animated");
});

示例：

$(".div-to-animate").on("animationend", function() {
  console.log("done");
  $(this).removeClass("animated");
}).addClass("animated fadeIn");

.animated {
  color: green;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<div class="div-to-animate">This is the div, it's green while being animated</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

使用 jQuery 检测 animate.css 的动画和动画状态结束

Detect being animated and end of animation state for animate.css with jQuery

css

jquery

animation

animate.css