diff --git a/docs/src/content/docs/pt/challenges/angular/43-signal-input.md b/docs/src/content/docs/pt/challenges/angular/43-signal-input.md index e437404..6b77df8 100644 --- a/docs/src/content/docs/pt/challenges/angular/43-signal-input.md +++ b/docs/src/content/docs/pt/challenges/angular/43-signal-input.md @@ -6,7 +6,6 @@ challengeNumber: 43 command: angular-signal-input sidebar: order: 16 - badge: New --- ## Informação diff --git a/docs/src/content/docs/pt/challenges/angular/44-view-transition.md b/docs/src/content/docs/pt/challenges/angular/44-view-transition.md new file mode 100644 index 0000000..7391bb4 --- /dev/null +++ b/docs/src/content/docs/pt/challenges/angular/44-view-transition.md @@ -0,0 +1,79 @@ +--- +title: 🔴 Transição de View +description: Desafio 44 você aprenderá a nova API para animação de transição de view +author: thomas-laforge +challengeNumber: 44 +command: angular-view-transition +sidebar: + order: 208 + badge: New +--- + +## Informação + +A View Transition API é uma nova API que fornece um conjunto de funcionalidades, permitindo desenvolvedores controlarem e manipularem as transições e animações entre views dentro de uma aplicação. +Isso tem um papel importante na melhoria da experiência do usuário (UX), trazendo vida a aplicações com transições atraentes e cativantes afim de guiar usuários por diferentes páginas e seções da aplicação. + +O objetivo deste desafio é aprender a manipular todos os tipos de transições propostas pela API. + +Para usar a API, Angular tem uma função `withViewTransitions()` que deve ser injetada dentro da configurações do roteador. + +Eu recomendaria a leitura da [documentação Chrome](https://developer.chrome.com/docs/web-platform/view-transitions). Você aprenderá tudo o que é necessário para completar o desafio com sucesso. + +Aqui, no entanto, um pequeno resumo: +Primeiramente, cada elemento DOM tem dois estados; um `old` para quando o elemento está deixando a página, e um `new` para quando está entrando na página: + +```css +::view-transition-old(root) { +/ / animação +} + +::view-transition-new(root) { +/ / animação +} +``` + +Para apontar um elemento em específico, você deve adicionar o seletor `view-transition-name` em uma classe CSS no nó DOM, como ilustrado abaixo: + +```css +.specific-element { + view-transition-name: specific-element; +} +``` + +Isso permite criar uma animação para aquele elemento apenas. + +Por último, se um mesmo elemento está presente em ambas as views, você pode automatizar a transição atribuindo o mesmo **nome da transição**. + +:::danger[Importante] +Lembre-se, você pode ter apenas UM ÚNICO `view-transition-name` por página. +::: + +## Declaração + +O objetivo deste desafio é realizar a transição entre os estados mostrados no vídeo abaixo: + + + +Para o estado final mostrado no vídeo seguinte: + + + +Observe os pontos: + +- O cabeçalho desliza para dentro e para fora +- Cada elemento transiciona suavemente para sua nova localização + +### Nível 1 + +Foque apenas no primeiro thumbnail e crie uma transição agradável e transparente + +### Nível 2 + +Crie a mesma transição atraente para todos os thumbnails, mas sem duplicar o `view-transition-name`. Note que a página tem apenas 3 thumbnails; em um cenário real, você pode ter muito mais. + +### Nível 3 + +Mude para a localização Y correta quando navegando para frente e para trás entre as páginas.