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
La interfaz TransitionEvent