Sou um grande fã de animações e transições CSS3, acelerado por hardware, ótimo para dispositivos móveis e libera você de grandes bibliotecas de animação (por exemplo, JQuery).
Uma boa parte das especificações do módulo de animação / transição são os eventos JavaScript DOM ( animationend
e transitionend
) que disparam na conclusão de suas interpolações, o que é muito útil para encadear animações e permitir que sua interface de usuário continue seu fluxo somente depois que as interpolações terminarem. Mas você fica com um pequeno problema:
- Detectando os tipos de eventos corretos para usar entre os fornecedores de navegadores
- Lidando com seu fluxo de IU nos casos em que animações / transições CSS3 não estão disponíveis (por exemplo, versões do IE abaixo de 10) de maneira elegante.
Por esses motivos, criei uma pequena biblioteca chamada CSSAnimEvent que você pode obter aqui:
https://github.com/magnetikonline/cssanimevent
Ele fornece CSSAnimEvent.onAnimationEnd(el,endHandler)
e CSSAnimEvent.onTransitionEnd(el,endHandler)
métodos que permitem que os manipuladores finais sejam chamados após a conclusão das animações e transições do seu elemento DOM em um navegador cruzado.
Além disso, para navegadores que não suportam animações / transições, os manipuladores finais são chamados instantaneamente no fluxo do programa, o que imita como o navegador lidará com as coisas visualmente – simplificando o fluxo do código JavaScript.