Ereignisgesteuerte CSS-Übergänge: Erkennen des Übergangsabschlusses
Bei der Arbeit mit CSS-Übergängen ist es oft wünschenswert, eine Benachrichtigung zu erhalten, wenn der Übergang abgeschlossen ist vollendet. Glücklicherweise bieten moderne Browser Ereignisse, die ausgelöst werden, wenn Übergänge enden, was die Implementierung der Rückruffunktion erleichtert.
Ereignisnamen in verschiedenen Browsern
Der spezifische Ereignisname für den Übergangsabschluss variiert je nach Browser Browser:
Ereignisbehandlung implementieren
Um eine Rückruffunktion zu implementieren, wenn CSS-Übergänge abgeschlossen sind, befolgen Sie diese Schritte Schritte:
elemToAnimate.addEventListener(transitionEndEventName, transitionEnded);
Es ist jedoch wichtig zu beachten, dass das webkitTransitionEnd-Ereignis nicht immer konsistent ausgelöst wird. Um dies zu berücksichtigen, wird empfohlen, ein Timeout festzulegen, um den Event-Handler aufzurufen, wenn er nicht wie erwartet ausgelöst wird.
Fallback-Timeout
setTimeout(function(){
if(!done){
console.log("timeout needed to call transition ended..");
transitionEnded();
}
}, requiredTimeForAnimation);Durch Einbindung Mit dem Timeout-Fallback können Sie sicherstellen, dass der Rückruf auch dann ausgeführt wird, wenn das Übergangsereignis dies nicht tut Feuer.
Abrufen des Namens des Übergangsereignisses
Die in der Antwort auf die Frage „Wie normalisiere ich CSS3-Übergangsfunktionen browserübergreifend?“ beschriebene Methode? kann verwendet werden, um den Namen des Übergangsereignisses zu ermitteln, der vom aktuellen Browser unterstützt wird.
Zusätzliche Ressourcen
Das obige ist der detaillierte Inhalt vonWie kann ich den Abschluss von CSS-Übergängen browserübergreifend zuverlässig erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
