animationEnd 事件处理程序 - 事件被听到两次

Question

我有一个代码：

$('#sectionName').on('animationend webkitAnimationEnd oAnimationEnd', function () {
    alert("Hello");
});

这是为了在#sectionName 的动画结束时触发警报。

它完成了它的工作，但它也会在网站首次启动时被触发。

有什么办法可以预防吗？只有在第二次听到 animationend 事件时才触发此警报的方法？

PS 我正在使用 wow.js，所以 #sectionName 对象在滚动到某个页面点后滑入，然后我希望显示警报。

Answer 1

简单尝试：

Var firstTime = true
$('#sectionName').on('animationend webkitAnimationEnd oAnimationEnd', function () {
    if(firstTime){
        firstTime = false;
        return;
    }
    alert("Hello");
});

Answer 2

您可以使用 wow.js callback 捕捉动画开始：

var sections = ['sectionName', 'sectionName2']
var wow = new WOW({
  callback: function(box) {
    var $box = $(box);
    if ( sections.indexOf( $box.attr('id') ) >= 0 ) {
      $box.on('animationend webkitAnimationEnd oAnimationEnd', function () {
          alert("Hello");
      });    
    }
  }
}).init();

[https://jsfiddle.net/6g01kLsh/]

Answer 3

仅测试了 animationend 和 webkitAnimationEnd。

var isWebkitAnim = window.onanimationend === undefined && window.onwebkitanimationend !== undefined
var animationEndEvent = isWebkitAnim ? 'webkitAnimationEnd' : 'animationend'

$('#sectionName').on(animationEndEvent, function() {
    alert("Hello")
})

animationEnd 事件处理程序 - 事件被听到两次

animationEnd event handler - event heard two times

javascript

jquery

wow.js