🟢 Animações Simples

Informação

Este é o primeiro de dois desafios de animação, o objetivo desta série é dominar animações no Angular.

Animações bem desenhadas pode fazer sua aplicação mais divertida e direta para usar, mas elas não são apenas comésticas. Animações pode melhorar sua aplicação e a experiência do usuário de várias maneiras:

• Sem animações, transições de página web podem parecer abruptas e desagradáveis.
• Movimento aumenta bastante a experiência do usuário, uma vez que animações dão a usuários a change de detectar as respostas da aplicação para suas ações.
• Boas animações intuitivamente chama a atenção do usuário para onde é necessário.

Eu recomendaria você ler a documentação oficial Você aprenderá tudo o que é necessário para completar o desafio com sucesso.

Caso contrário, olhe este exemplo funcional e o repositório git para se inspirar.

Declaração

O objetivo deste desafio é adicionar animações, elas devem executar quando o usuário acessa a página ou a recarrega.

Restrições

• Não use nenhum CSS e use a API integrada do Angular @angular/animations.
• Não dispare as animações com um botão como nos exemplos, mas quando o usuário entrar ou recarregar a página.

Nível 1

Adicionar uma animação de movimento e fading para os parágrados no lado esquerdo.

Nível 2

Adicionar uma animação cambaleante para a lista no lado direito.