Manipulação de eventos de animação / transição CSS3

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 ( animationende 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.