Wie kann ich CSS3-Übergangsendereignisse in verschiedenen Browsern zuverlässig erkennen und verarbeiten?

Browserübergreifende Normalisierung von CSS3-Übergangsendereignissen

Der Umgang mit unterschiedlichen Namen von CSS3-Übergangsendereignissen in verschiedenen Browsern kann eine Herausforderung sein. Hier sind einige Ansätze, um dieses Problem zu beheben:

Browser-Sniffing

Ein Ansatz ist das Browser-Sniffing, wie unten gezeigt:

var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd" : "transitionend";

element.addEventListener(transitionend, function() {
  // Do something
}, false);

Diese Methode sucht nach bestimmten Browser-Benutzeragenten und weist den entsprechenden Ereignisnamen zu. Es basiert jedoch auf bestimmten vordefinierten Regeln und berücksichtigt möglicherweise nicht alle Browserversionen oder potenziellen Variationen.

Mehrere Ereignis-Listener

Alternativ können Sie mehrere Ereignis-Listener anhängen Name jedes unterstützten Browserereignisses:

element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);

function fn() {
  // Do something
}

Dieser Ansatz behandelt alle unterstützten Ereignisse, kann jedoch zu einer unnötigen Ereignisbehandlung führen Overhead.

Verbesserte Technik von Modernizr

Ein robusterer und browserübergreifender Ansatz besteht darin, den Namen des Übergangsendereignisses mithilfe der Modernizr-Bibliothek dynamisch zu bestimmen:

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];
    }
  }

  throw 'TransitionEnd event is not supported in this browser'; 
}

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

Diese Technik vermeidet Browser-Sniffing und erkennt dynamisch den unterstützten Ereignisnamen basierend auf dem unterstützten CSS des Elements Eigenschaften.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS3-Übergangsendereignisse in verschiedenen Browsern zuverlässig erkennen und verarbeiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!