Evento de fin de transición
Ejemplo
Haga algo con un elemento <div> cuando finalice una transición CSS:
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
Definición y uso
El evento Transitionend ocurre cuando se completa una transición CSS.
Nota: si se elimina la transición antes de que finalice, por ejemplo, si se elimina la propiedad de propiedad de transición de CSS , el evento de final de transición no se activará.
Para obtener más información sobre las transiciones CSS, consulte nuestro tutorial sobre transiciones CSS3 .
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el evento.
Los números seguidos de "webkit", "moz" u "o" especifican la primera versión que funcionó con un prefijo.
| Event | |||||
|---|---|---|---|---|---|
| transitionend | 26.0 4.0 (webkitTransitionEnd) |
10.0 | 16.0 4.0 (mozTransitionEnd) |
6.1 3.1 (webkitTransitionEnd) |
12.1 10.5 (oTransitionEnd) |
Sintaxis
object.addEventListener("webkitTransitionEnd", myScript); // Code for Safari 3.1 to 6.0
object.addEventListener("transitionend", myScript); // Standard syntax
Nota: el método addEventListener() no es compatible con Internet Explorer 8 y versiones anteriores.
Detalles técnicos
| Burbujas: | sí |
|---|---|
| Cancelable: | sí |
| Tipo de evento: | TransiciónEvento |
| Versión DOM: | Eventos de nivel 3 |
páginas relacionadas
Tutorial CSS: Transiciones CSS3
Referencia CSS: propiedad de transición CSS3
Referencia de CSS: Propiedad de propiedad de transición de CSS3