Rappel sur la transition CSS

Question

Est-il possible de recevoir une notification (comme un rappel) lorsque une transition CSS a été complétée?

Answer 1

Oui, si de telles choses sont prises en charge par le navigateur, alors un événement est déclenché lorsque la transition est terminée. Cependant, l'événement réel diffère 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 se déclenche pas toujours ! Cela m'a pris au piège plusieurs fois, et semble se produire si l'animation n'aurait aucun effet sur l'élément. Pour contourner cela, il est logique d'utiliser une temporisation pour déclencher le gestionnaire d'événements dans le cas où il ne se déclenche pas comme prévu. Un article de blog sur ce problème est disponible ici : http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <-- Erreur interne du serveur 500

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

var transitionEndEventName = "XXX"; //déterminez, par exemple, "webkitTransitionEnd"..
var elemToAnimate = ... //la chose que vous voulez animer..
var done = false;
var transitionEnded = function(){
     done = true;
     //faire vos trucs de fin de transition..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//code de déclenchement de l'animation ici..

//assurez-vous de nettoyer si l'événement ne se déclenche pas..
setTimeout(function(){
    if(!done){
        console.log("une temporisation est nécessaire pour appeler la fin de la transition..");
        transitionEnded();
    }
}, XXX); //note : XXX devrait être le temps requis pour que l'animation se termine plus une période de grâce (par exemple, 10ms) 

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

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

Answer 2

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

Leur exemple (reformaté sur plusieurs lignes):

box.addEventListener( 
     'webkitTransitionEnd', 
     function( event ) { 
         alert( "Transition terminée!" ); 
     }, false );

Answer 3

Je suis en train d'utiliser le code suivant, c'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() {
 //faire quelque chose
});

---

Alternativement, si vous utilisez bootstrap alors vous pouvez simplement faire

$(".myClass").one($.support.transition.end,
function() {
 //faire quelque chose
});

Cela est parce qu'ils incluent le code suivant dans bootstrap.js

+function ($) {
  'use strict';

  // SUPPORT DES TRANSITIONS CSS (Rappel : 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 // explicite pour 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

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 = "L'événement de transition est terminé";
}

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

Cliquez pour démarrer l'animation

Answer 5

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