diff --git a/docs/src/content/docs/pt/challenges/angular/46-simple-animations.md b/docs/src/content/docs/pt/challenges/angular/46-simple-animations.md new file mode 100644 index 000000000..a89590230 --- /dev/null +++ b/docs/src/content/docs/pt/challenges/angular/46-simple-animations.md @@ -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. + + + +### NĆ­vel 2 + +Adicionar uma animaĆ§Ć£o cambaleante para a lista no lado direito. + + + + + + + +