Rappel sur la transition CSS

Oui, si de telles choses sont prises en charge par le navigateur, un événement est déclenché lorsque la transition est terminée. L'événement réel diffère cependant entre les navigateurs:

• les navigateurs Webkit (Chrome, Safari) utilisent webkitTransitionEnd
• Firefox utilise transitionend
• IE9 + utilise msTransitionEnd
• Opera utilise oTransitionEnd

Cependant, vous devez savoir que webkitTransitionEnd ne tire pas toujours! Cela m'a pris un certain nombre de fois, et semble se produire si l'animation n'aurait aucun effet sur élément. Pour contourner ce problème, il est logique d'utiliser un délai de feu le gestionnaire d'événement dans le cas où il n'a pas été déclenchée comme prévu. Un billet de blog sur ce problème est disponible ici: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/

Dans cet esprit, j'ai tendance à utiliser cet événement dans un morceau de code qui ressemble un peu à ceci:

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn't fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms) 

Remarque: pour obtenir le nom de fin de l'événement de transition, vous pouvez utiliser la méthode posté comme la réponse à: comment normaliser les fonctions de Transition CSS3 entre les navigateurs?.

Remarque: cette question est également liée à: - événements de transition CSS3

J'utilise le code suivant, est beaucoup plus simple que d'essayer de détecter quel événement final spécifique un navigateur utilise.

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

Sinon, si vous utilisez bootstrap, vous pouvez simplement faire

$(".myClass").one($.support.transition.end,
function() {
 //do something
});

C'est parce qu'ils incluent ce qui suit dans bootstrap.js

+function ($) {
  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================

  function transitionEnd() {
    var el = document.createElement('bootstrap')

    var transEndEventNames = {
      'WebkitTransition' : 'webkitTransitionEnd',
      'MozTransition'    : 'transitionend',
      'OTransition'      : 'oTransitionEnd otransitionend',
      'transition'       : 'transitionend'
    }

    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return { end: transEndEventNames[name] }
      }
    }

    return false // explicit for ie8 (  ._.)
  }

  // http://blog.alexmaccaw.com/css-transitions
  $.fn.emulateTransitionEnd = function (duration) {
    var called = false, $el = this
    $(this).one($.support.transition.end, function () { called = true })
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
    setTimeout(callback, duration)
    return this
  }

  $(function () {
    $.support.transition = transitionEnd()
  })

}(jQuery);

Le jQuery .transit plugin , Un plugin pour les transformations et les transitions CSS3, peut appeler vos animations CSS à partir de script et vous donner un rappel.