Question

我使用animate.css为元素设置动画。我想在动画结束时运行一些javascript。出于某种原因，以下方法无效。

myElement.addEventListener("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
    //code never runs
}, false);

jQuery的.on()方法有效，但我想避免使用jQuery：

myElement.on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {
    //code runs
});

这是为什么？还有另一种方法可以在不使用jQuery的情况下检测动画何时完成？

Answer 1

使用var div = document.querySelector('.animated'); ['webkitAnimationEnd', 'animationend'].forEach(function(e) { div.addEventListener(e, eventHandler, false); }); function eventHandler(e) { var tgt = e.target; tgt.style.color = 'red'; }方法将多个事件类型放在数组中。

<强>段

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">


<div class="animated tada">TADA!</div>

{{1}}

动画结束时，addEventListener不会触发

1 个答案: