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事件處理程序 - 事件聽到兩次

回答

相關問題