Compreendendo os eventos de transição CSS3

As transições CSS3 permitem animações suaves e efeitos visuais em elementos da web. Para melhorar a experiência do usuário e sincronizar ações com essas transições, é importante monitorar seu progresso. Este artigo aborda a questão de saber se o CSS3 fornece eventos para verificar quando uma transição começa ou termina. A transição CSS aciona eventos DOM correspondentes. Para cada propriedade de transição, um evento é gerado. Isso permite que os desenvolvedores executem ações que coincidem com a conclusão da transição.

WebKit

No WebKit, o evento webkitTransitionEnd é acionado quando uma transição termina. Definir um ouvinte de evento JavaScript para este evento permite que os desenvolvedores capturem a conclusão.

box.addEventListener('webkitTransitionEnd', function(event) { alert("Transição finalizada!"); }, false);

box.addEventListener('webkitTransitionEnd', function(event) {
  alert("Finished transition!");
}, false);

Firefox : fim de transição

• Internet Explorer: transactionend
• No Internet Explorer, o evento transactionend é acionado somente quando a transição é concluída com êxito; removê-lo prematuramente evita que o evento seja acionado.
• Juntando tudo

Aproveitando o evento apropriado com base no navegador e usando ouvintes de eventos JavaScript, os desenvolvedores podem monitorar o progresso das transições CSS3 e executar as ações necessárias em sincronia com sua conclusão.