animationEndイベントハンドライベントは2回

Question

私は、コードを持っているのを聞きました。

それは仕事をしますが、ウェブサイトが初めて起動されたときにも起動されます。

防止策はありますか？アニメーション終了イベントが2回目に聞こえるときにのみ、このアラートをトリガーする方法はありますか？

PS私はwow.jsを使用していますので、特定のページポイントまでスクロールした後に#sectionNameオブジェクトがスライドインしてから、警告を表示します。

Answer 1

それをシンプルにしてみてください。あなたがアニメーションをキャッチするwow.js callbackを使用することができます

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

Answer 2

が開始されます。

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") 
})