Evento transitionend

Eventos DOM Evento TransitionEvent

Definición y uso

El evento transitionend ocurre cuando la transición CSS se completa.

Notas:Si la transición se elimina antes de que se complete, por ejemplo, si se elimina el CSS transition-property Las propiedades que no desencadenen el evento transitionend.

Para obtener más información sobre las transiciones CSS, aprende en nuestros Tutoriales de transición CSS3.

Ejemplo

Hacer algo con el elemento <div> cuando finalice la transición CSS:

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

Prueba tu mismo

Sintaxis

object.addEventListener("webkitTransitionEnd", myScript);  // Código para Safari 3.1 a 6.0
object.addEventListener("transitionend", myScript);        // Sintaxis estándar

Notas:Internet Explorer 8 o versiones anteriores no lo admite Método addEventListener().

Detalles técnicos

Burbuja: Compatibilidad
Cancelable: Compatibilidad
Tipo de evento: Evento TransitionEvent
Versión de DOM: Eventos de Nivel 3

Compatibilidad del navegador

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

Los números con "webkit", "moz" o "o" al final indican la primera versión que utiliza estos prefijos.

Evento Chrome IE Firefox Safari Opera
transitionend 26.0
4.0 (webkit)		 10.0 16.0
4.0 (moz)		 6.1
3.1 (webkit)		 12.1
10.5 (o)

Páginas relacionadas

Tutoriales de CSS: transición de CSS3

Manual de referencia de CSS: propiedad de transición de CSS3

Manual de referencia de CSS: Atributo transition-property de CSS3

Eventos DOM Evento TransitionEvent