El evento transitionend es lanzado cuando una transición CSS se ha completado. Si la transición es eliminada antes de haberse completado, como cuando transition-property es eliminado o display se establece a "none", entonces el evento no será generado.

Información general

Especificación
CSS Transitions
Interfaz
TransitionEvent
Burbuja
Cancelable
Objetivo
Element, Document, Window
Acción
undefined

Propiedades

Propiedad Tipo Descripción
target Read only EventTarget El objetivo del evento (el elemento más superior en el árbol DOM).
type Read only DOMString El tipo de evento.
bubbles Read only Boolean Si el elemento normalmente es burbuja o no
cancelable Read only Boolean Si el elemento es cancelable o no
propertyNameRead only DOMString The name of the CSS property associated with the transition.
elapsedTimeRead only Float The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of transition-delay.
pseudoElementRead only DOMString The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).

Ejemplo

Este ejemplo establece un manejador de evento para detectar el evento transitionend, y así cambiar el texto que se muestra dentro del elemento cuando la transición se completa.

let element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", function(event) {
  element.innerHTML = "Done!";
}, false);

Especificaciones

Especificación Estado Comentario
CSS Transitions
La definición de 'transitionend' en esta especificación.
Working Draft Definición inicial.

Compatibilidad con navegadores

  
Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico 1.0[1]
36
(Yes) 4.0 (2.0) 10 10.5[2]
12
12.10
23
3.2[1]
7.0.6
  
Característica Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico 2.1 (Yes) 4.0 (2.0) ? 10[2]
12
12.10
3.2[1]

[1] Implementado en Chrome 1.0, Android 2.1 y WebKit 3.2 como webkitTransitionEnd. Chrome 36 y WebKit 7.0.6 usan el estándar transitionend.

[2] Implementado como oTransitionEnd desde Opera 10.5, como otransitionend desde la versión 12 y como el estándar transitionend desde la versión 12.10.

Véase también

La interfaz TransitionEvent

Etiquetas y colaboradores del documento

 Colaboradores en esta página: juan-ferrer-toribio
 Última actualización por: juan-ferrer-toribio,