Evento final de transição
Exemplo
Faça algo com um elemento <div> quando uma transição CSS terminar:
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
Definição e uso
O evento transitionend ocorre quando uma transição CSS é concluída.
Nota: Se a transição for removida antes da conclusão, por exemplo, se a propriedade CSS transition- property for removida, o evento transitionend não será acionado.
Para obter mais informações sobre Transições CSS, consulte nosso tutorial sobre Transições CSS3 .
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao evento.
Números seguidos de "webkit", "moz" ou "o" especificam a primeira versão que funcionou com um prefixo.
Event | |||||
---|---|---|---|---|---|
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
Observação: o método addEventListener() não é compatível com o Internet Explorer 8 e versões anteriores.
Detalhes técnicos
Bolhas: | sim |
---|---|
Cancelável: | sim |
Tipo de evento: | Evento de Transição |
Versão DOM: | Eventos de Nível 3 |
Páginas relacionadas
Tutorial CSS: Transições CSS3
Referência CSS: propriedade de transição CSS3
Referência CSS: propriedade de propriedade de transição CSS3