Comment puis-je normaliser les événements de fin de transition CSS3 dans différents navigateurs à l'aide de JavaScript ?

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

Énoncé du problème :

Dans différents navigateurs, les événements de fin de transition CSS3 sont déclenchés différemment : "webkitTransitionEnd" dans Webkit, "transitionEnd" dans Firefox et "oTransitionEnd" dans Opera. Comment pouvons-nous gérer ces variations de manière transparente en JavaScript pur ?

Solution :

La mise en œuvre d'écouteurs d'événements distincts pour chaque navigateur est inefficace et fastidieuse. Au lieu de cela, une solution plus élégante proposée dans Modernizr peut être utilisée :

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

Cette fonction vérifie les événements de transition pris en charge dans le navigateur actuel en créant un élément et en parcourant les noms d'événements potentiels. Il renvoie le nom de l'événement approprié lorsqu'il est trouvé.

Pour utiliser cette solution :

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

Cette approche garantit la compatibilité entre navigateurs et évite le reniflage du navigateur ou l'attribution de plusieurs événements.

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!