animationEnd Event-Handler - Ereignis gehört zweimal

Question

Ich habe einen Code:

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

, die gemeint ist, den Alarm auszulösen, wenn Animation von #sectionName endet.

Es macht seine Arbeit, aber es wird auch ausgelöst, wenn die Website zum ersten Mal gestartet wird.

Gibt es eine Möglichkeit, dies zu verhindern? Eine Möglichkeit, diese Warnung nur auszulösen, wenn das Animationsend-Ereignis zum zweiten Mal gehört wird?

PS Ich verwende wow.js, so dass das Objekt #sectionName eingefügt wird, nachdem zu einem bestimmten Seitenpunkt gescrollt wurde, und dann möchte ich die Warnung angezeigt werden.

Answer 1

Probieren Sie es einfach:

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

Answer 2

Sie wow.js verwenden können callback eine Animation zu fangen begonnen:

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

Nur für animationend und webkitAnimationEnd getestet.

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

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