Exemplo
Faça algo com um <div> elemento quando uma transição CSS terminou:
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd",
myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend",
myFunction); Tente você mesmo " Definição e Uso
O evento transitionend ocorre quando uma transição CSS foi concluída.
Nota: Se a transição for removido antes da conclusão, por exemplo, se o CSS de transição de propriedade imóvel é removido, o evento transitionend não dispara.
Para mais informações sobre CSS Transitions, veja nosso tutorial sobre CSS3 transições .
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente o evento.
Números seguido por "webkit", "moz" ou "o" especificar a primeira versão que trabalhou com um prefixo.
| Evento | |||||
|---|---|---|---|---|---|
| transitionend | 26,0 4,0 (webkitTransitionEnd) | 10.0 | 16,0 4,0 (mozTransitionEnd) | 6.1 3,1 (webkitTransitionEnd) | 12.1 10,5 (oTransitionEnd) |
Sintaxe
object.addEventListener("webkitTransitionEnd", myScript );
// Code for Safari 3.1 to 6.0
object .addEventListener("transitionend", myScript );
// Standard syntax
Nota: O addEventListener () método não é suportado no Internet Explorer 8 e versões anteriores.
Detalhes técnicos
| Bolhas: | sim |
|---|---|
| Cancelavel: | sim |
| Tipo de evento: | TransitionEvent |
| DOM Versão: | Nível 3 Eventos |
Páginas relacionadas
Tutorial CSS: CSS3 Transitions
CSS Referência: Propriedade de transição CSS3
CSS Referência: CSS3 transição Imobiliário
objeto de evento