Rappel sur la transition CSS

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

Leur exemple (reformaté sur plusieurs lignes):

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

Oui, si ces éléments sont pris 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 webkitTransitionEnd (Chrome, Safari) utilisent webkitTransitionEnd
• Firefox utilise transitionend
• IE9 + utilise msTransitionEnd
• Opera utilise oTransitionEnd

Cependant, vous devez savoir que webkitTransitionEnd ne webkitTransitionEnd pas toujours! Cela m'a surpris un certain nombre de fois et semble se produire si l'animation n'a aucun effet sur l'élément. Pour contourner cela, il est logique d'utiliser un délai d'attente pour déclencher le gestionnaire d'événements dans le cas où il n'a pas été déclenché comme prévu. Une publication sur ce problème est disponible ici: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <- 500 Erreur interne du serveur

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, eg "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 (eg 10ms) 

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

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

J'utilise le code suivant, 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 }); 

Sinon, si vous utilisez bootstrap, vous pouvez tout 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 plugin jQuery.transit , un plugin pour les transformations CSS3 et les transitions, peut appeler vos animations CSS à partir du script et vous rappeler.