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

Posted 2023-03-06

【中文标题】使用jQuery检测animate.css的动画状态和动画状态结束[重复]

【英文标题】：Detect being animated and end of animation state for animate.css with jQuery [duplicate]

【发布时间】：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 

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

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

【参考方案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>