Skip to content

Commit b589eac

Browse files
authored
Merge pull request #777 from kabrunko-dev/docs/translate-challenge-46
docs(pt): translate challenge 46
2 parents a691a7e + 5a85537 commit b589eac

File tree

1 file changed

+56
-0
lines changed

1 file changed

+56
-0
lines changed
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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

Comments
 (0)