transitionendEvento

Ejemplos

Modificar el estilo y el texto del elemento <div> después de que el CSS complete la transición:

// Código para Safari 3.1 a 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);

// Sintaxis estándar
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

Pruébalo »

Definición y uso

El evento transitionend se activa después de que el CSS complete la transición.

Nota:Si la transición se elimina antes de completarse, por ejemplo, si la propiedad CSStransition-propertyse elimina, el evento de transición no se activará.

Para más información sobre transiciones CSS, consulte nuestrasTransiciones CSS3。

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite el evento.

Los números especificados con 'webkit', 'moz' u 'o' son el prefijo de la primera versión que admite el evento.

Event
transitionend	26.0 4.0 corresponde a webkitTransitionEnd	10.0	16.0 4.0 corresponde a mozTransitionEnd	6.1 3.1 corresponde a webkitTransitionEnd	12.1 10.5 corresponde a oTransitionEnd

Nota:Safari 3.1 a 6.0 admite este evento solo con el prefijo webkitTransitionEnd.

Sintaxis

object.addEventListener("webkitTransitionEnd", myScript); // Código para Safari 3.1 a 6.0
object.addEventListener("transitionend", myScript); // Standard syntax

Nota:Internet Explorer 8 y versiones anteriores de IE no admitenaddEventListener()el método.

Detalles técnicos