transitionend

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
Sí
Cancelable
Sí
Objetivo
Element, Document, Window
Acción
undefined

Propiedades

Property Type Description
target Read only EventTarget The event target (the topmost target in the DOM tree).
type Read only DOMString The type of event.
bubbles Read only Boolean Whether the event normally bubbles or not.
cancelable Read only Boolean Whether the event is cancellable or not.
propertyName Read only DOMString The name of the CSS property associated with the transition.
elapsedTime Read 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.
pseudoElement Read 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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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