Ejemplo
Hacer algo con un <div> elemento haya una transición de CSS ha terminado:
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd",
myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend",
myFunction); Inténtalo tú mismo " Definición y Uso
El evento se produce cuando transitionend una transición CSS ha completado.
Nota: Si la transición se produce antes de la finalización, por ejemplo, si el CSS de transición de la propiedad se elimina la propiedad, el evento transitionend no se disparará.
Para obtener más información acerca de CSS Transitions, visite nuestro tutorial sobre CSS3 transiciones .
Soporte para el 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 por "webkit", "moz" u "o" especifican la primera versión que funcionaba con un prefijo.
| Evento | |||||
|---|---|---|---|---|---|
| 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 addEventListener () método no es compatible en Internet Explorer 8 y versiones anteriores.
Detalles técnicos
| burbujas: | Sí |
|---|---|
| cancelable: | Sí |
| Tipo de evento: | TransitionEvent |
| DOM Version: | Nivel 3 Eventos |
Páginas relacionadas
CSS Tutorial: CSS3 Transitions
CSS Referencia: CSS3 Propiedad transición
CSS Referencia: CSS3 transición de la propiedad del inmueble
de objeto de evento