¿Hay algún evento activado por un elemento para verificar si una transición css3 ha comenzado o finalizado?
fuente
¿Hay algún evento activado por un elemento para verificar si una transición css3 ha comenzado o finalizado?
La finalización de una transición CSS genera un evento DOM correspondiente. Se dispara un evento por 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.
Para determinar cuándo se completa una transición, configure una función de escucha de eventos 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 );
Hay un solo evento que se dispara cuando se completan las transiciones. En Firefox, el evento es
transitionend
, en OperaoTransitionEnd
, y en WebKitwebkitTransitionEnd
.
Hay un tipo de evento de transición disponible. El
oTransitionEnd
evento se produce al finalizar la transición.
El
transitionend
evento se produce 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 los navegadores?
Actualizar
Todos los navegadores modernos ahora admiten el evento no prefijado:
element.addEventListener('transitionend', callback, false);
https://caniuse.com/#feat=css-transitions
Estaba usando el enfoque dado por Pete, sin embargo, ahora he comenzado a usar lo siguiente
Alternativamente, si usa bootstrap, simplemente puede hacer
Esto es porque incluyen lo siguiente en bootstrap.js
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
fuente
Todos los navegadores modernos ahora admiten el evento no prefijado:
element.addEventListener('transitionend', callback, false);
Funciona en las últimas versiones de Chrome, Firefox y Safari. Incluso IE10 +.
fuente
En Opera 12 cuando se enlaza usando el JavaScript simple, 'oTransitionEnd' funcionará:
sin embargo, si vincula jQuery, debe usar 'otransitionend'
En caso de que esté utilizando Modernizr o bootstrap-transition.js, simplemente puede hacer un cambio:
Puede encontrar información aquí también http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/
fuente
¡Solo por diversión, no hagas esto!
fuente
Si simplemente desea detectar un solo final de transición, sin usar ningún marco JS, aquí hay una pequeña y conveniente función de utilidad:
Uso:
entonces, si desea cancelar en algún momento, aún puede hacerlo con
También es bueno para otros usos de eventos :)
fuente