Comment normaliser les fonctions de transition CSS3 dans les navigateurs?

L'événement de fin de transition de Webkit est appelé webkitTransitionEnd, Firefox est transitionEnd, l'opéra est oTransitionEnd. Quel est le bon moyen de les aborder tous en pur JS? Dois-je faire du reniflement du navigateur? ou mettre en œuvre chacun séparément? Une autre façon qui ne m'est pas venue à l'esprit?

c'est à dire:

//doing browser sniffing
var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd";

element.addEventListener(transitionend, function(){
  //do whatever
},false);

ou

// Assigning an event listener per browser
element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);

function fn() {
   //do whatever
}

Il existe une technique utilisée dans Modernizr, améliorée:

function transitionEndEventName () {
    var i,
        undefined,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

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

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

Ensuite, vous pouvez simplement appeler cette fonction chaque fois que vous avez besoin de l'événement de fin de transition:

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

Selon le commentaire de Matijs, le moyen le plus simple de détecter les événements de transition est d'utiliser une bibliothèque, jquery dans ce cas:

$("div").bind("webkitTransitionEnd.done oTransitionEnd.done otransitionend.done transitionend.done msTransitionEnd.done", function(){
  // Unlisten called events by namespace,
  // to prevent multiple event calls. (See comment)
  // By the way, .done can be anything you like ;)
  $(this).off('.done')
});

En javascript sans bibliothèque, cela devient un peu verbeux:

element.addEventListener('webkitTransitionEnd', callfunction, false);
element.addEventListener('oTransitionEnd', callfunction, false);
element.addEventListener('transitionend', callfunction, false);
element.addEventListener('msTransitionEnd', callfunction, false);

function callfunction() {
   //do whatever
}

Mettre à jour

Ce qui suit est une façon plus propre de le faire, et ne nécessite pas de modernisation

$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() {
 //do something
});

Alternativement

var transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd otransitionend',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    }, transitionEnd = transEndEventNames[Modernizr.prefixed('transition')];

Ceci est basé sur le code suggéré par Modernizr, mais avec l'événement supplémentaire pour les nouvelles versions d'Opera.

http://modernizr.com/docs/#prefixed

Si vous utilisez jQuery et Bootstrap $.support.transition.endrenverra le bon événement pour le navigateur actuel.

Il est défini dans Bootstrap et utilisé dans ses rappels d'animation , bien que la documentation jQuery dise de ne pas se fier à ces propriétés:

Bien que certaines de ces propriétés soient documentées ci-dessous, elles ne sont pas soumises à un long cycle de dépréciation / suppression et peuvent être supprimées une fois que le code jQuery interne n'en a plus besoin.

http://api.jquery.com/jQuery.support/

À partir de 2015, ce one-liner devrait faire l'affaire (IE 10+, Chrome 1+, Safari 3.2+, FF 4+ et Opera 12 +): -

var transEndEventName = ('WebkitTransition' in document.documentElement.style) ? 'webkitTransitionEnd' : 'transitionend'

Joindre l'écouteur d'événements est simple: -

element.addEventListener(transEndEventName , theFunctionToInvoke);

La seconde est la voie à suivre. Un seul de ces événements se déclenchera dans chaque navigateur, vous pouvez donc tous les définir et cela fonctionnera.

Voici une manière plus propre

 function transitionEvent() {
      // Create a fake element
      var el = document.createElement("div");

      if(el.style.OTransition) return "oTransitionEnd";
      if(el.style.WebkitTransition) return "webkitTransitionEnd";
      return "transitionend";
    }

la fermeture de Google s'assure que vous n'avez pas à faire cela. Si vous avez un élément:

goog.events.listen(element, goog.events.EventType.TRANSITIONEND, function(event) {
  // ... your code here
});

en regardant la source de goog.events.eventtype.js, TRANSITIONEND est calculé en regardant l'agent utilisateur:

// CSS transition events. Based on the browser support described at:
  // https://developer.mozilla.org/en/css/css_transitions#Browser_compatibility
  TRANSITIONEND: goog.userAgent.WEBKIT ? 'webkitTransitionEnd' :
      (goog.userAgent.OPERA ? 'oTransitionEnd' : 'transitionend'),

J'utilise un code comme celui-ci (avec jQuery)

var vP = "";
var transitionEnd = "transitionend";
if ($.browser.webkit) {
    vP = "-webkit-";
    transitionEnd = "webkitTransitionEnd";
} else if ($.browser.msie) {
    vP = "-ms-";
} else if ($.browser.mozilla) {
    vP = "-moz-";
} else if ($.browser.opera) {
    vP = "-o-";
    transitionEnd = "otransitionend"; //oTransitionEnd for very old Opera
}

Cela me permet d'utiliser JS pour ajouter des éléments en spécifiant vP concatenté avec la propriété, et s'il n'a pas touché un navigateur, il utilise simplement le standard. Les événements me permettent de lier facilement comme ceci:

object.bind(transitionEnd,function(){
    callback();
});

remplacement jquery:

(function ($) {
  var oldOn = $.fn.on;

  $.fn.on = function (types, selector, data, fn, /*INTERNAL*/ one) {
    if (types === 'transitionend') {
      types = 'transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd';
    }

    return oldOn.call(this, types, selector, data, fn, one);
  };
})(jQuery);

et utilisation comme:

$('myDiv').on('transitionend', function() { ... });

La réponse acceptée est correcte, mais vous n'avez pas à recréer cet élément encore et encore et ...

Construisez une variable globale et ajoutez la (les) fonction (s):

(function(myLib, $, window, document, undefined){

/**
 * @summary
 * Returns the browser's supported animation end event type.
 * @desc
 * @see {@link https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/}
 * @function myLib.getAnimationEndType
 * @return {string} The animation end event type
 */
(function(){
   var type;

   myLib.getAnimationEndType = function(){
      if(!type)
         type = callback();
      return type;

      function callback(){
         var t,
             el = document.createElement("fakeelement");

         var animations = {
            "animation"      : "animationend",
            "OAnimation"     : "oAnimationEnd",
            "MozAnimation"   : "animationend",
            "WebkitAnimation": "webkitAnimationEnd"
         }

         for (t in animations){
            if (el.style[t] !== undefined){
               return animations[t];
            }
         }
      }
   }
}());

/**
 * @summary
 * Returns the browser's supported transition end event type.
 * @desc
 * @see {@link https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/}
 * @function myLib.getTransitionEndType
 * @return {string} The transition end event type
 */
(function(){
   var type;

   myLib.getTransitionEndType = function(){
      if(!type)
         type = callback();
      return type;

      function callback(){
         var t,
             el = document.createElement("fakeelement");

         var transitions = {
            "transition"      : "transitionend",
            "OTransition"     : "oTransitionEnd",
            "MozTransition"   : "transitionend",
            "WebkitTransition": "webkitTransitionEnd"
         }

         for (t in transitions){
            if (el.style[t] !== undefined){
               return transitions[t];
            }
         }
      }
   }
}());

}(window.myLib = window.myLib || {}, jQuery, window, document));