Wie kann ich den Abschluss von CSS-Übergängen erkennen?

Rückrufe bei CSS-Übergängen

Abfrage: Kann man eine Benachrichtigung erhalten, wenn ein CSS-Übergang abgeschlossen wurde?

Antwort : In Browsern, die Rückrufe unterstützen, wird nach Abschluss des Übergangs ein Ereignis ausgelöst. Das Ereignis variiert je nach Browser:

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

WebKit TransitionEnd-Problem

Beachten Sie, dass webkitTransitionEnd möglicherweise nicht immer ausgelöst wird. Dies geschieht, wenn die Animation keine sichtbare Auswirkung auf das Element hat. Um dies zu umgehen, sollten Sie eine Zeitüberschreitung in Betracht ziehen, um den Ereignishandler auszulösen, wenn das Ereignis nicht wie erwartet ausgelöst wird.

Empfohlene Codestruktur

var transitionEndEventName = "XXX"; // Specify the appropriate event name
var elemToAnimate = ... // Element to be animated
var done = false;
var transitionEnded = function() {
    done = true;
    // Code to execute when transition finishes
    elemToAnimate.removeEventListener(transitionEndEventName, transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName, transitionEnded, false);

// Animation triggering code here

// Fallback for browsers without event notifications
setTimeout(function() {
    if (!done) {
        transitionEnded();
    }
}, XXX); // Calculate XXX based on animation time and grace period

Hinweis : Siehe „Wie normalisiere ich CSS3-Übergangsfunktionen browserübergreifend?“ zur Normalisierung von Übergangsereignisnamen.

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