Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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>