Comment puis-je détecter et gérer de manière fiable les événements de fin de transition CSS3 dans différents navigateurs ?

Normalisation entre navigateurs des événements de fin de transition CSS3

Gérer différents noms d'événements de fin de transition CSS3 dans les navigateurs peut être un défi. Voici quelques approches pour résoudre ce problème :

Sniffer du navigateur

Une approche consiste à renifler le navigateur, comme indiqué ci-dessous :

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

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

Cette méthode vérifie les agents utilisateur du navigateur spécifiques et attribue le nom d'événement approprié. Cependant, il repose sur des règles prédéfinies spécifiques et peut ne pas prendre en compte toutes les versions du navigateur ou ses variations potentielles.

Écouteurs d'événements multiples

Vous pouvez également attacher plusieurs écouteurs d'événements pour chaque nom d'événement de navigateur pris en charge :

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

function fn() {
  // Do something
}

Cette approche gère tous les événements pris en charge, mais peut conduire à une gestion inutile des événements surcharge.

Technique améliorée de Modernizr

Une approche plus robuste et conviviale pour tous les navigateurs consiste à déterminer dynamiquement le nom de l'événement de fin de transition à l'aide de la bibliothèque Modernizr :

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);

Cette technique évite le reniflage du navigateur et détecte dynamiquement le nom de l'événement pris en charge en fonction du CSS pris en charge par l'élément. propriétés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!