Evento transitionend

Eventos DOM Evento TransitionEvent

Definição e uso

O evento transitionend ocorre quando a transição CSS é concluída.

Observação:Se a transição for removida antes de ser concluída, por exemplo, se o CSS transition-property Atributos, não acionarão o evento transitionend.

Para obter mais informações sobre transições CSS, aprenda nosso Tutorial de transição CSS3.

Exemplo

Quando a transição CSS termina, faça algo com o elemento <div>:

// código específico para Safari 3.1 a 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// sintaxe padrão
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

Experimente você mesmo

Sintaxe

object.addEventListener("webkitTransitionEnd", myScript);  // código específico para Safari 3.1 a 6.0
object.addEventListener("transitionend", myScript);        // sintaxe padrão

Observação:Internet Explorer 8 ou versões anteriores não suportam Método addEventListener().

Detalhes técnicos

Bubble: Suporte
Cancellable: Suporte
Tipo de evento: Evento TransitionEvent
Versão DOM: Nível 3 de Eventos

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente o evento.

Os números seguidos por "webkit", "moz" ou "o" especificam a primeira versão a usar esses prefixos.

Evento Chrome IE Firefox Safari Opera
transitionend 26.0
4.0 (webkit)		 10.0 16.0
4.0 (moz)		 6.1
3.1 (webkit)		 12.1
10.5 (o)

Páginas relacionadas

Tutorial de CSS: transição CSS3

Manual de referência CSS: propriedade de transição CSS3

Manual de referência do CSS: Propriedade transition-property do CSS3

Eventos DOM Evento TransitionEvent