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