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

我有一个代码：animationEnd事件处理程序 - 事件听到两次

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

这是指当#sectionName的动画结束触发警报。

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

有没有办法阻止它？仅在第二次听到动画结束事件时才触发此警报的一些方法？

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

来源

2016-04-27 Ancinek

不，该事件将在选定元素的所有动画结束后调用。为了解决这个问题，你可以延迟添加这个事件处理程序，直到第一个幻灯片动画完成。 –

但是只有一个#sectionName的动画，这是这个元素的“幻灯片”，但是当我启动页面时触发了警报 – Ancinek

尝试简单：

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

来源

2016-04-27 12:27:26

嗯，我不知道该说什么。就这么简单，我甚至都没有想过。 – Ancinek

您可以使用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/]

来源

2016-04-27 13:28:04

只有测试animationend和webkitAnimationEnd。

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

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

来源

2016-07-07 14:16:56 swordray

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

回答

相关问题