Wie kann ich CSS3-Übergangsendereignisse in verschiedenen Browsern mithilfe von JavaScript normalisieren?

Browserübergreifende Normalisierung von CSS3-Übergangsendereignissen

Problemstellung:

In verschiedenen In allen Browsern werden CSS3-Übergangsendereignisse unterschiedlich ausgelöst: „webkitTransitionEnd“ in Webkit, „transitionEnd“ in Firefox und „oTransitionEnd“ in Opera. Wie können wir diese Variationen nahtlos in reinem JavaScript verarbeiten?

Lösung:

Die Implementierung separater Ereignis-Listener für jeden Browser ist ineffizient und mühsam. Stattdessen kann eine elegantere in Modernizr vorgeschlagene Lösung verwendet werden:

function transitionEndEventName() {
  var el = document.createElement('div'),
      transitions = {
        'transition':'transitionend',
        'OTransition':'otransitionend',
        'MozTransition':'transitionend',
        'WebkitTransition':'webkitTransitionEnd'
      };

  for (var i in transitions) {
    if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
      return transitions[i];
    }
  }
}

Diese Funktion prüft, ob im aktuellen Browser unterstützte Übergangsereignisse vorliegen, indem sie ein Element erstellt und potenzielle Ereignisnamen durchläuft. Es gibt den entsprechenden Ereignisnamen zurück, wenn es gefunden wird.

So verwenden Sie diese Lösung:

var transitionEnd = transitionEndEventName();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);

Dieser Ansatz gewährleistet die browserübergreifende Kompatibilität und vermeidet Browser-Sniffing oder mehrere Ereigniszuweisungen.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS3-Übergangsendereignisse in verschiedenen Browsern mithilfe von JavaScript normalisieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!