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 
}

哪个很好，但并非适用于所有情况。因为转换后没有删除动画类。

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

Answer 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>

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

1 个答案: