Retorno de chamada na transição de CSS

É possível obter uma notificação (como retorno de chamada) quando uma transição de CSS foi concluída?

Eu sei que o Safari implementa um callback webkitTransitionEnd que você pode append diretamente ao elemento com a transição.

Seu exemplo (reformatado para várias linhas):

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

Sim, se tais coisas forem suportadas pelo navegador, um evento será acionado quando a transição for concluída. O evento real, no entanto, difere entre os navegadores:

  • Navegadores Webkit (Chrome, Safari) usam webkitTransitionEnd
  • Firefox usa transitionend
  • IE9 + usa msTransitionEnd
  • Opera usa oTransitionEnd

No entanto, você deve estar ciente de que o webkitTransitionEnd nem sempre triggers! Isso me pegou várias vezes e parece ocorrer se a animação não tiver efeito no elemento. Para contornar isso, faz sentido usar um tempo limite para triggersr o manipulador de events no caso em que ele não foi acionado como esperado. Um post sobre este problema está disponível aqui: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <- 500 Internal Server Error

Com isso em mente, eu costumo usar este evento em um pedaço de código que parece um pouco com isso:

 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) 

Nota: para obter o nome final do evento de transição, você pode usar o método postado como a resposta em: Como normalizo as funções de Transição CSS3 nos navegadores? .

Nota: esta questão também está relacionada a: – events de transição CSS3

Eu estou usando o código a seguir, é muito mais simples do que tentar detectar qual evento final específico um navegador usa.

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

Alternativamente, se você usar bootstrap, então você pode simplesmente fazer

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

Isto é porque eles incluem o seguinte em 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); 

O plug-in jQuery.transit , um plug-in para transformações e transições CSS3, pode chamar suas animações CSS do script e fornecer um retorno de chamada.