|
| 1 | +--- |
| 2 | +title: 🟢 Animações Simples |
| 3 | +description: Desafio 46 é sobre aprender a API de animação integrada do Angular |
| 4 | +author: sven-brodny |
| 5 | +contributors: |
| 6 | + - svenson95 |
| 7 | +challengeNumber: 46 |
| 8 | +command: angular-simple-animations |
| 9 | +sidebar: |
| 10 | + order: 17 |
| 11 | +--- |
| 12 | + |
| 13 | +## Informação |
| 14 | + |
| 15 | +Este é o primeiro de dois desafios de animação, o objetivo desta série é dominar animações no Angular. |
| 16 | + |
| 17 | +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: |
| 18 | + |
| 19 | +- Sem animações, transições de página web podem parecer abruptas e desagradáveis. |
| 20 | +- 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. |
| 21 | +- Boas animações intuitivamente chama a atenção do usuário para onde é necessário. |
| 22 | + |
| 23 | +Eu recomendaria você ler a [documentação oficial](https://angular.io/guide/animations) Você aprenderá tudo o que é necessário para completar o desafio com sucesso. |
| 24 | + |
| 25 | +Caso contrário, olhe este [exemplo funcional](https://svenson95.github.io/ng-xmp-animations/) e o [repositório git](https://github.com/svenson95/ng-xmp-animations) para se inspirar. |
| 26 | + |
| 27 | +## Declaração |
| 28 | + |
| 29 | +O objetivo deste desafio é adicionar animações, elas devem executar quando o usuário acessa a página ou a recarrega. |
| 30 | + |
| 31 | +## Restrições |
| 32 | + |
| 33 | +- Não use nenhum CSS e use a API integrada do Angular `@angular/animations`. |
| 34 | +- Não dispare as animações com um botão como nos exemplos, mas quando o usuário entrar ou recarregar a página. |
| 35 | + |
| 36 | +### Nível 1 |
| 37 | + |
| 38 | +Adicionar uma animação de movimento e fading para os parágrados no lado esquerdo. |
| 39 | + |
| 40 | +<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/a43c3995-16ef-4d1f-bcfc-602b4ce80937"> |
| 41 | +</video> |
| 42 | + |
| 43 | +### Nível 2 |
| 44 | + |
| 45 | +Adicionar uma animação cambaleante para a lista no lado direito. |
| 46 | + |
| 47 | +<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc"> |
| 48 | +</video> |
| 49 | +<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc"> |
| 50 | +</video> |
| 51 | +</video> |
| 52 | +<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc"> |
| 53 | +</video> |
| 54 | +</video> |
| 55 | +</video> |
| 56 | +</video> |
0 commit comments