Após o “skewmorphism” das primeiras horas da Apple no mundo Mobile, a Microsoft nos ofereceu uma nova abordagem ao design de tela: estávamos em 2012, tínhamos acabado de experimentar o advento do chamado design “Flat”.
Depois de alguns anos redesenhando serviços digitais usando cores sólidas, designs mais refinados, enfim simplificando, aqui está o Google, e suas novas recomendações que mais uma vez quebram as regras da ergonomia e do design: "Material Design" (http://www.google.com/design/spec/material-design/introduction.html).
Se à primeira vista, as coisas não parecem fundamentalmente transformadas para o desenvolvedor Front-End, é principalmente nas animações e no significado que devemos dar a elas que devemos concentrar nossos esforços.
(http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-visual-continuity)
Produzir efeitos que permitem transições animadas para contar uma história aos visitantes por conta própria é baseado em um princípio: poder encadear animações em momentos-chave escolhidos pela equipe digital.
Há vários anos, navegadores modernos e seus respectivos mecanismos de renderização (geralmente baseados em Webkit) nos fornecem o elemento técnico necessário para essa conquista: acionar eventos.
E mais particularmente o evento transitionEnd que marca o fim de uma mudança de estado animada de um ou mais elementos.

Exemplo :

Digamos que queremos fazer um elemento aparecer e depois alongá-lo antes de finalmente torná-lo maior.
Se for configurada uma animação “clássica”, ou seja, uma mudança de estado, todas as mudanças ocorrerão ao mesmo tempo. O elemento aparecerá, então tomará altura e alongará em um único movimento. O evento TransitionEnd permite que você espere o fim da mudança de estado animada anterior antes de iniciar a próxima.
Podemos, portanto, pensar em termos de uma sucessão de estados, um cenário de transição.
:
1. As classes CSS são definidas

.initial-state-element-invisible { transição: todos facilitam 250ms; -transição do webkit: todos os 250ms de fácil saída; -moz-transição: todos os 250ms de saída fácil; -o-transição: todos os 250ms de saída fácil; opacidade: 0; altura: 100px; } .state-number-two-element-visible { opacidade: 1; } .state-number-three-highest-element { largura: 100px; altura: 300px; } .state-number-three-widest-element { largura: 300px; altura: 300px; }

2. Um pouco de JavaScript (JQuery) para escutar o trigger do evento e aplicar as novas propriedades CSS no momento certo.

$('.state-initial-element-invisible').click(function(){ $(this).addClass('state-number-two-element-visible'); $(this).one("transitionend webkittransitionEnd otransitionEnd MStransitionEnd", function(){ $(this).addClass('state-number-three-highest-element'); $(this).one("transitionend webkittransitionEnd otransitionEnd MStransitionEnd", function(){ $( this) .addClass('estado-número-três-elemento-maior'); }); }); });

Estado 1
Nosso elemento é invisível
Estado 2
Nosso elemento é visível
Estado3
Quando nosso elemento termina de aparecer, ele começa a ganhar altura…
Estado4
... então ele se deita.

em conclusão

Este exemplo simples, que atende às recomendações de intenção de animação, demonstra que é possível ajudar a entender a usabilidade de uma interface apenas por meio de suas animações usando o evento transitionEnd.

---