Wie kann ich Benachrichtigungen erhalten, wenn CSS-Übergänge in verschiedenen Browsern abgeschlossen sind?

Benachrichtigungen für den Abschluss des CSS-Übergangs

Wenn CSS-Übergänge abgeschlossen sind, ist es wertvoll, Benachrichtigungen zu erhalten, um Maßnahmen nach dem Übergang einzuleiten. Glücklicherweise stellen Browser Ereignisse bereit, die nach Abschluss des Übergangs ausgelöst werden, sodass Entwickler Rückruffunktionen registrieren können.

Browserspezifische Ereignisnamen

Browser verwenden jedoch browserabhängige Ereignisnamen:

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

webkitTransitionEnd Fallstricke

Beachten Sie, dass webkitTransitionEnd möglicherweise nicht immer ausgelöst wird, insbesondere wenn Animationseffekte keine haben spürbare Auswirkung auf das Element. Um dies zu mildern, setzen Sie eine Zeitüberschreitung ein, um den Ereignishandler auszuführen, wenn er nicht wie erwartet ausgelöst wird.

Codebeispiel

Der folgende Code demonstriert die Verwendung dieses Ereignisses:

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn't fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms) 

Hinweis zur Browserkompatibilität

Um den geeigneten Übergangsereignisnamen für einen bestimmten Browser zu ermitteln, verwenden Sie die unter „Wie normalisiere ich CSS3“ hervorgehobene Methode Übergangsfunktionen zwischen Browsern?".

Das obige ist der detaillierte Inhalt vonWie kann ich Benachrichtigungen erhalten, wenn CSS-Übergänge in verschiedenen Browsern abgeschlossen sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!