使用jQuery检测animate.css的动画状态和动画状态结束[重复]答案

【问题标题】：Detect being animated and end of animation state for animate.css with jQuery [duplicate]使用jQuery检测animate.css的动画状态和动画状态结束[重复]
【发布时间】：2017-03-21 19:06:55
【问题描述】：

我正在使用 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 
}

这很好，但并非适用于所有情况。因为动画类在过渡后没有被移除。

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

【问题讨论】：

标签： jquery css animation animate.css

【解决方案1】：

您可以监听animationend 事件并在其触发时移除该类：

$(".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>

【讨论】：