Wie erkennt man das Ende von CSS3-Übergängen und -Animationen in jQuery?

Überwachung des Abschlusses von CSS3-Übergängen und Animationen in jQuery

In der Webentwicklung ist es oft wünschenswert, ein Element auszublenden und anschließend daraus zu entfernen das DOM nach Abschluss der Animation. Während dies mit den Animationsfunktionen von jQuery unkompliziert ist, erfordert die Ausweitung auf CSS3-Übergänge einen Mechanismus, um deren Abschluss zu erkennen.

Zum Glück bietet jQuery Möglichkeiten, dieses Problem anzugehen:

Übergänge

Um das Ende eines CSS-Übergangs über jQuery zu erkennen, verwenden Sie die folgenden Ereignisbinder:

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

Mozilla führt dies unter https://developer.mozilla.org/en weiter aus -US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_completion_of_a_transition

Animationen

Für Animationen ist der Ansatz ähnlich:

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

Ein wichtiger zu beachtender Punkt ist, dass Sie durch die gleichzeitige Verwendung der bind()-Methode mit allen Browser-Präfix-Ereigniszeichenfolgen die Unterstützung aller Browser mit dieser Funktionalität sicherstellen können.

Optimierung der Ereignisbehandlung

Um das Auslösen des Handlers auf ein einzelnes Vorkommen zu beschränken, verwenden Sie die .one()-Methode von jQuery wie folgt:

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

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

Methodenveraltung und moderne Alternativen

Es ist erwähnenswert, dass die bind()-Methode von jQuery ab jQuery 1.7 zugunsten der on()-Methode veraltet ist. Darüber hinaus können Sie die Methode off() innerhalb der Callback-Funktion nutzen, um eine einmalige Ausführung zu gewährleisten, wie in diesem Beispiel gezeigt:

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

Dieser Ansatz hat den gleichen Effekt wie die Verwendung der Methode one() .

Zusätzliche Ressourcen

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

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