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事件处理程序 - 事件听到两次

3 个答案: