Eventos de transición CSS3
¿Hay algún evento activado por un elemento para verificar si una transición CSS3 ha comenzado o finalizado?
Borrador de transiciones CSS del W3C
La finalización de una transición CSS genera un evento DOM correspondiente. Se activa un evento para cada propiedad que sufre una transición. Esto permite a un desarrollador de contenido realizar acciones que se sincronizan con la finalización de una transición.
kit web
Para determinar cuándo se completa una transición, configure una función de escucha de eventos de JavaScript para el evento DOM que se envía al final de una transición. El evento es una instancia de WebKitTransitionEvent y su tipo es
webkitTransitionEnd.
box.addEventListener( 'webkitTransitionEnd',
function( event ) { alert( "Finished transition!" ); }, false );
Mozilla
Hay un único evento que se activa cuando se completan las transiciones. En Firefox, el evento es
transitionend, en Opera,oTransitionEndy en WebKit eswebkitTransitionEnd.
Ópera
Hay un tipo de evento de transición disponible. El
oTransitionEndevento ocurre al finalizar la transición.
explorador de Internet
El
transitionendevento ocurre al finalizar la transición. Si la transición se elimina antes de completarse, el evento no se activará.
Desbordamiento de pila: ¿Cómo normalizo las funciones de transición CSS3 en todos los navegadores?
Actualizar
Todos los navegadores modernos ahora admiten el evento sin prefijo:
element.addEventListener('transitionend', callback, false);
https://caniuse.com/#feat=css-transitions
Estaba usando el enfoque dado por Pete, sin embargo, ahora comencé a usar el siguiente
$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
function() {
//do something
});
Alternativamente, si usa bootstrap, simplemente puede hacer
$(".myClass").one($.support.transition.end,
function() {
//do something
});
Esto se debe a que incluyen lo siguiente en 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 ( ._.)
}
$(function () {
$.support.transition = transitionEnd()
})
}(jQuery);
Tenga en cuenta que también incluyen una función emulateTransitionEnd que puede ser necesaria para garantizar que siempre se produzca una devolución de llamada.
// 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
}
Tenga en cuenta que a veces este evento no se activa, generalmente en el caso de que las propiedades no cambien o no se active una pintura. Para garantizar que siempre recibamos una devolución de llamada, establezcamos un tiempo de espera que activará el evento manualmente.
http://blog.alexmaccaw.com/css-transitions
Todos los navegadores modernos ahora admiten el evento sin prefijo:
element.addEventListener('transitionend', callback, false);
Funciona en las últimas versiones de Chrome, Firefox y Safari. Incluso IE10+.
Sólo por diversión, ¡no hagas esto!
$.fn.transitiondone = function () {
return this.each(function () {
var $this = $(this);
setTimeout(function () {
$this.trigger('transitiondone');
}, (parseFloat($this.css('transitionDelay')) + parseFloat($this.css('transitionDuration'))) * 1000);
});
};
$('div').on('mousedown', function (e) {
$(this).addClass('bounce').transitiondone();
});
$('div').on('transitiondone', function () {
$(this).removeClass('bounce');
});
