mirror of
https://github.com/Raghu-Ch/angular-challenges.git
synced 2026-02-10 12:53:03 -05:00
Merge pull request #777 from kabrunko-dev/docs/translate-challenge-46
docs(pt): translate challenge 46
This commit is contained in:
@@ -0,0 +1,56 @@
|
|||||||
|
---
|
||||||
|
title: 🟢 Animações Simples
|
||||||
|
description: Desafio 46 é sobre aprender a API de animação integrada do Angular
|
||||||
|
author: sven-brodny
|
||||||
|
contributors:
|
||||||
|
- svenson95
|
||||||
|
challengeNumber: 46
|
||||||
|
command: angular-simple-animations
|
||||||
|
sidebar:
|
||||||
|
order: 17
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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](https://angular.io/guide/animations) Você aprenderá tudo o que é necessário para completar o desafio com sucesso.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
## 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.
|
||||||
|
|
||||||
|
<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/a43c3995-16ef-4d1f-bcfc-602b4ce80937">
|
||||||
|
</video>
|
||||||
|
|
||||||
|
### Nível 2
|
||||||
|
|
||||||
|
Adicionar uma animação cambaleante para a lista no lado direito.
|
||||||
|
|
||||||
|
<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc">
|
||||||
|
</video>
|
||||||
|
<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc">
|
||||||
|
</video>
|
||||||
|
</video>
|
||||||
|
<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc">
|
||||||
|
</video>
|
||||||
|
</video>
|
||||||
|
</video>
|
||||||
|
</video>
|
||||||
Reference in New Issue
Block a user