Callback sur la transition CSS

Question

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

Answer 1

Je sais que Safari met en œuvre un webkitTransitionEnd rappel que vous pouvez joindre directement à l'élément de la transition.

Leur exemple (reformaté à plusieurs lignes):

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

Answer 2

Oui, si ces 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 toutefois entre les navigateurs:

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

Cependant, vous devez être conscient que webkitTransitionEnd ne pas toujours le feu! Cela m'a pris un certain nombre de fois, et semble se produire si l'animation aurait aucun effet sur l'élément. Pour contourner ce problème, il est logique d'utiliser un délai d'attente pour tirer le gestionnaire d'événements dans le cas où cela n'a pas été déclenché comme prévu. Un 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, je tends à 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 affichée comme la réponse à: Comment puis-je normaliser les fonctions de transition CSS3 entre les différents navigateurs? .

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

Answer 3

Je suis en utilisant le code suivant, est beaucoup plus simple que d'essayer de détecter quel événement de fin spécifique utilise un navigateur.

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

---

Par ailleurs, si vous utilisez bootstrap alors vous pouvez simplement faire

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

Ceci est becuase ils comprennent 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);

Answer 4

Le plugin jQuery.transit , un plug-in pour les transformations CSS3 et transitions, peuvent appeler vos animations CSS à partir du script et vous donner un rappel.

Answer 5

Cela peut facilement être réalisé avec l'événement transitionend voir la documentation 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>