Rappel sur la transition CSS

Est-il possible d'obtenir une notification (comme un rappel) lorsqu'une transition CSS est terminée?

Je sais que Safari implémente un rappel webkitTransitionEnd que vous pouvez attacher directement à l'élément avec la transition.

Leur exemple (reformaté en plusieurs lignes):

box.addEventListener( 
     'webkitTransitionEnd', 
     function( event ) { 
         alert( "Finished transition!" ); 
     }, false );

Oui, si de telles choses sont prises en charge par le navigateur, un événement est déclenché une fois la transition terminée. L'événement réel diffère cependant d'un navigateur à l'autre:

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

Cependant, vous devez être conscient que webkitTransitionEndcela ne se déclenche pas toujours! Cela m'a surpris à plusieurs reprises et semble se produire si l'animation n'avait aucun effet sur l'élément. Pour contourner ce problème, il est logique d'utiliser un délai d'expiration pour déclencher le gestionnaire d'événements dans le cas où il n'a pas été déclenché comme prévu. Un article de blog sur ce problème est disponible ici: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <- 500 Internal Server Error

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 publiée comme réponse dans: Comment normaliser les fonctions de transition CSS3 dans les navigateurs? .

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

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

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

Alternativement, si vous utilisez bootstrap, vous pouvez simplement faire

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

C'est parce qu'ils incluent les éléments suivants 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 plugin jQuery.transit , un plugin pour les transformations et transitions CSS3, peut appeler vos animations CSS à partir d'un script et vous donner un rappel.

Ceci peut facilement être réalisé avec l' transitionendévénement voir la documentation ici Un exemple simple:

document.getElementById("button").addEventListener("transitionend", myEndFunction);

function myEndFunction() {
	this.innerHTML = "Transition event ended";
}

#button {transition: top 2s; position: relative; top: 0;}

<button id="button" onclick="this.style.top = '55px';">Click me to start animation</button>