web-dev-qa-db-fra.com

Rappel sur la transition CSS

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

javascriptcsscss3css-transitions
98
Pompair

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 );
82
Doug Neiner

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

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

Cependant, sachez que webkitTransitionEnd ne se déclenche pas toujours! Cela m'a surpris plusieurs fois et semble se produire si l'animation n'a aucun effet sur l'élément. Pour contourner ce problème, il est judicieux 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 erreur de serveur interne

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 puis-je normaliser les fonctions de transition CSS3 entre les navigateurs? .

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

103
Mark Rhodes

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

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

Alternativement, si vous utilisez bootstrap alors 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);
43
Tom

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.

6
Brian

Ceci peut être facilement réalisé avec l'événement transitionend 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>
4
Yehuda Schwartz