Wie kann ich den Abschluss von CSS3-Übergängen und -Animationen mit jQuery erkennen?

Warten auf CSS3-Übergänge mit jQuery

Bei der Verwendung von CSS3-Übergängen zum Animieren von Elementen kann es schwierig sein, festzustellen, wann die Animation abgeschlossen ist. Im Gegensatz zu jQuery-Animationen, die Rückrufe ermöglichen, wenn die Animationen abgeschlossen sind, bieten CSS3-Übergänge keinen solchen Mechanismus. Es gibt jedoch eine Lösung mit jQuery.

Übergangsabschluss erkennen

jQuery bietet Ereignis-Listener, mit denen das Ende von CSS3-Übergängen erkannt werden kann. Diese Listener sind:

• transitionend
• webkitTransitionEnd
• oTransitionEnd
• MSTransitionEnd

Sie können an diese Ereignisse binden Verwenden Sie die bind()-Methode für den Selektor, den Sie verfolgen möchten. Zum Beispiel:

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    // Code to execute when the transition ends
});

Animationsabschluss erkennen

Ähnlich wie Übergänge können Animationen auch mithilfe eines jQuery-Ereignisses erkannt werden Zuhörer:

• animationend
• webkitAnimationEnd
• oAnimationEnd
• MSAnimationEnd

Verwenden Sie die bind()-Methode wie zuvor :

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    // Code to execute when the animation ends
});

Einmalige Veranstaltung Auslösen

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

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    // Code to execute when the transition ends
});

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    // Code to execute when the animation ends
});

Best Practices

• Übergeben Sie alle Ereignisse mit Browser-Präfix Zeichenfolgen in die bind()-Methode ein, um alle Browser zu unterstützen.
• Verwenden Sie .one(), um zu verhindern, dass der Handler mehrere auslöst mal.
• Die bind()-Methode von jQuery ist veraltet. on() wird ab Version 1.7 bevorzugt.
• Alternativ können Sie off() verwenden, um den Rückruf zu trennen, nachdem das Ereignis ausgelöst wurde, um sicherzustellen, dass es nur einmal ausgelöst wird.

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