Wie kann ich den Abschluss von CSS-Übergängen browserübergreifend zuverlässig erkennen?

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:

• Webkit (Chrome, Safari): webkitTransitionEnd
• Firefox: transitend
• IE9: msTransitionEnd
• Opera: oTransitionEnd

Ereignisbehandlung implementieren

Um eine Rückruffunktion zu implementieren, wenn CSS-Übergänge abgeschlossen sind, befolgen Sie diese Schritte Schritte:

1. Bestimmen Sie den geeigneten Übergangsereignisnamen für den verwendeten Browser.
2. Fügen Sie einen Ereignis-Listener zum Element hinzu, das den Übergang durchläuft:

elemToAnimate.addEventListener(transitionEndEventName, transitionEnded);

3. Definieren Sie die Rückruffunktion „transitionEnded“, um beim Übergang die gewünschten Aktionen auszuführen abgeschlossen.

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

• Umgang mit Übergängen mit CSS3
• CSS3-Übergangsereignisse

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!