diff --git a/src/content/docs/pt-br/guides/view-transitions.mdx b/src/content/docs/pt-br/guides/view-transitions.mdx index 17f1fd6da7139..d5a35925697bd 100644 --- a/src/content/docs/pt-br/guides/view-transitions.mdx +++ b/src/content/docs/pt-br/guides/view-transitions.mdx @@ -1,52 +1,55 @@ --- -title: Transições de visualização (Experimental) +title: Transições de Visualização description: >- - Como habilitar o suporte experimental para transições de visualização no seu site Astro. + Habilite navegação fluída entre páginas no Astro com transições de visualização. i18nReady: true --- import Since from '~/components/Since.astro' -Suporte para **transições de visualização, opcionais, por página** em projetos Astro pode ser habilitado com uma flag experimental. Transições de visualização atualizam o conteúdo de sua página sem a atualização normal, atualizando a página inteira, do navegador e oferece animações suaves entre páginas. +Astro suporta **transições de visualização, opcionais, por página** com apenas algumas linhas de código. Transições de visualização atualizam o conteúdo de sua página sem a atualização normal, atualizando a página inteira, do navegador e oferece animações suaves entre páginas. -Astro oferece um componente de roteamento `` que pode ser adicionado ao `` de uma página para controlar as transições de página conforme você navega para outras páginas. Ele fornece um roteamento leve no lado do cliente que intercepta a navegação e permite você personalizar a transição entre páginas. Adicione esse componente em um componente `.astro` reutilizável, como um cabeçalho ou layout em comum, para ter transições de página animadas através de todo o seu site (modo SPA). +Astro oferece um componente de roteamento `` que pode ser adicionado ao `` de uma página para controlar as transições de página conforme você navega para outras páginas. Ele fornece um leve roteador no lado do cliente que [intercepta a navegação](#processo-de-navegação-no-lado-do-cliente) e permite você personalizar a transição entre páginas. + +Adicione esse componente em um componente `.astro` reutilizável, como um cabeçalho ou layout em comum, para ter [transições de página animadas através de todo o seu site (modo SPA)](#transições-de-visualização-em-todo-o-site-modo-spa). O suporte para transições de visualização do Astro é possível graças à nova API de [Transições de Visualização](https://developer.chrome.com/docs/web-platform/view-transitions/) do navegador e também inclui: -- Algumas [animações integradas](#diretivas-de-animação-integradas), como `slide` e `fade`. +- Algumas [opções de animação integradas](#diretivas-de-animação-integradas), como `fade`, `slide` e `none`. - Suporte a animações de navegação tanto avançando quanto retornando. - A habilidade de [customizar completamente todos os aspectos da animação de transição](#customizando-animações), e construir suas próprias animações. +- A opção de [impedir navegação no lado do cliente para links que não são páginas](#impedindo-navegação-no-lado-do-cliente). - [Controle sobre o comportamento de fallback](#controle-de-fallback) para navegadores que ainda não suportam as APIs de Transição de Visualização. +- Suporte automático para [`prefers-reduced-motion`](#prefers-reduced-motion). -:::caution -Transicões de visualização é uma funcionalidade experimental habilitada no Astro 2.9. A API está sujeita a alterações enquanto não for marcada como estável. +:::note +Por padrão, toda página irá utilizar a navegação regular, da página inteira, do navegador. Você deve optar pelas transições de visualização e pode utilizá-las seja por página ou no site inteiro. ::: -## Habilitando Transições de Visualização em seu Projeto +## Adicionando Transições de Visualização em uma Página -Você pode habilitar o suporte para transições de página animadas através da flag experimental `viewTransitions` em sua configuração Astro: +Opte por utilizar transições de visualização em páginas individuais importando e adicionando o componente de roteamento `` ao `` de toda página desejada. -```js title="astro.config.mjs" ins={4-6} -import { defineConfig } from 'astro/config'; - -export default defineConfig({ - experimental: { - viewTransitions: true - } -}); +```astro title="src/pages/index.astro" ins={2,7} +--- +import { ViewTransitions } from 'astro:transitions'; +--- + + + Minha página inicial + + + +

Bem-vindo ao meu website!

+ + ``` -:::note -Habilitar o suporte à transições de visualização não converte automaticamente seu site inteiro em uma SPA (Aplicação de Página Única). Por padrão, todas as página ainda usarão a navegação normal do navegador, de página inteira. - -Adicione transição de página no Astro utilizando o componente de roteamente `` individualmente por página, ou em todo o site. -::: - ## Transições de visualização em todo o site (modo SPA) Importe e adicione o componente `` em seu `` comum ou componente de layout. Astro criará animações padrões baseado nas similaridades entre a página antiga e a nova e também oferecerá um comportamento de fallback para navegadores sem suporte. -O exemplo abaixo mostra como adicionar trasições de visualização em todo o site importando e adicionando esse componente em um componente Astro ``: +O exemplo abaixo mostra como adicionar as animações de navegação padrão do Astro em todo o site, incluindo a opção de controle de fallback padrão para navegadores sem suporte, ao importar e adicionar esse componente em um componente Astro ``: ```astro title="components/HeadComum.astro" ins={2,12} --- @@ -63,7 +66,9 @@ import { ViewTransitions } from 'astro:transitions'; ``` -Você pode também adicionar transições de visualização em páginas individualmente. Importe o componente `` e coloque ele diretamente dentro do `` da página. +Nenhuma outra configuração é necessária para habilitar a navegação no lado do cliente padrão do Astro! + +Utilize [diretivas de transição](#diretivas-de-transição) ou [sobrescreva a navegação no lado do cliente padrão](#impedindo-navegação-no-lado-do-cliente) em elementos individuais para maior controle. ## Diretivas de transição @@ -75,7 +80,7 @@ Use diretivas `transition:*` opcionais em elementos da página em seus component - `transition:animate`: Permite que você sobrescreva a animação padrão do Astro ao substituir o elemento antigo pelo elemento novo especificando um tipo de animação. Use as [diretivas de animação integradas](#diretivas-de-animação-integradas) do Astro ou [crie animações de transição customizadas](#customizando-animações). - `transition:persist`: Permite que você sobrescreva o padrão do Astro de substituir elementos antigos por novos e [persista componentes e elementos HTML](#mantendo-estado) ao navegar para outra página. -## Nomeando uma transição +### Nomeando uma transição Em alguns casos, você pode querer ou precisar identificar os elementos correspondentes em uma transição por conta própria. Você pode especificar um nome para um par de elementos utilizando a diretiva `transition:name`. @@ -87,9 +92,9 @@ Em alguns casos, você pode querer ou precisar identificar os elementos correspo