Wie überwache ich das Ende von CSS3-Übergängen und -Animationen mit jQuery?

So überwachen Sie den Abschluss von CSS3-Übergängen und -Animationen mit jQuery

Beim Ausblenden eines Elements mithilfe eines Deckkraftübergangs besteht häufig der Wunsch, dies zu tun Entfernen Sie das Element nach Abschluss aus dem DOM. jQuery vereinfacht diesen Prozess, indem es Ihnen ermöglicht, die Entfernung nach Abschluss der Animation anzugeben. Bei der Verwendung von CSS3-Übergängen wird es jedoch schwieriger.

Übergangs-/Animationsenden erkennen

Um das Ende eines Übergangs über jQuery zu erkennen, können Sie Folgendes verwenden:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

Mozilla bietet eine detaillierte Referenz für diesen Ansatz: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

Für Bei Animationen ist die Methode ähnlich:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

Sie können alle Browser-präfixierten Ereigniszeichenfolgen in der bind()-Methode angeben, um die Kompatibilität sicherzustellen.

Einzelausführungs-Ereignisbehandlung

Um sicherzustellen, dass der Event-Handler nur einmal ausgelöst wird, verwenden Sie die .one()-Methode von jQuery:

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

Bind() Deprecation

Die bind()-Methode von jQuery ist veraltet. Verwenden Sie stattdessen on() (ab jQuery 1.7). Sie können off() auch für die Callback-Funktion verwenden, um eine Einzelauslösung zu ermöglichen. Hier ist ein entsprechendes Beispiel mit on() und off():

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

Referenzen:

• [.off()-Methode](https:/ /api.jquery.com/off/)
• [.one() Methode](https://api.jquery.com/one/)

Das obige ist der detaillierte Inhalt vonWie überwache ich das Ende von CSS3-Übergängen und -Animationen mit jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!