View Transition Nativa

1. Duas demos, cada uma testando 1 coisa só

Este card usa sw-wide — por isso ele é mais largo que os de baixo, sem nenhum CSS escrito à mão. Basta o atributo:

Página inteira

A transição padrão do site anima tudo, cabeçalho incluso.

Testar

Só o conteúdo (menu fixo)

Mesma transição, mas o menu não se mexe — só o conteúdo troca.

Testar

Fade

Página some e aparece com opacidade, sem deslocamento.

Testar

Zoom

Página encolhe saindo e a nova entra vindo de perto.

Testar

Circle

Página sai com fade e a nova revela num círculo crescendo do centro.

Testar

Slide vertical

Página sai por cima e a nova entra vindo de baixo.

Testar

Os 6 botões acima não têm onclick nem JS nenhum escrito à mão — só atributos no próprio link. sw-trans-style escolhe a animação (mesmo mecanismo antes feito com SWMpa.setStyle() manual); sw-trans-name nomeia (view-transition-name) um elemento desta página antes de navegar, pra combinar com o sw-morph da página de destino.

2. Como Funciona

Uma propriedade CSS liga tudo. A navegação nativa (Navigation API) detecta se você está indo pra frente (clique/push) ou voltando (botão voltar/traverse) e troca o atributo data-sw-trans-direction no <html> — o padrão do site inverte a direção do slide de acordo: entra da direita indo, entra da esquerda voltando, igual o gesto físico de "avançar"/"retroceder".

1 Clique num link normal (ou use voltar/avançar do navegador)

2 O navegador tira uma foto da página atual

3 JS classifica a direção (forward/back) e marca data-sw-trans-direction antes da foto

4 A nova página carrega e as duas fotos são animadas — direção diferente muda o sentido do slide

Quer uma demo com efeito fixo (não muda por direção)? Dê ao seletor mais peso com !important, ou não use [data-sw-trans-direction] em nada — é exatamente o que as demos de Fade/Zoom/Circle/Slide vertical abaixo fazem.

3. Escopo por Elemento (menu fixo, ou só 1 elemento)

Por padrão anima a página inteira. Dê a qualquer elemento um sw-morph com o mesmo nome nas duas páginas — pode ser o <main> todo (menu fica fixo, ver demo acima) ou só uma imagem/card específico.

4. Outros Estilos (troque as keyframes)

O exemplo acima usa slide. Pra mudar o estilo, troque a animação — exemplos prontos:

5. Acessibilidade

prefers-reduced-motion

Reduz a transição a quase zero automaticamente.

@media (prefers-reduced-motion: reduce)

scrollbar-gutter: stable

Evita o conteúdo pular quando a barra de rolagem muda.

html { scrollbar-gutter: stable; }

Suporte

Chrome, Edge e Safari. Firefox navega normal, sem transição.

caniuse: view-transitions

Quick Reference

API	Uso	Descrição
`@view-transition`	CSS	`navigation: auto;` liga a navegação nativa
`::view-transition-old/new(root)`	CSS	Anima a página inteira
`sw-morph="nome"`	Elemento	Escopa a transição (mesmo nome nas duas páginas)
`sw-wide`	Elemento	Cancela o padding lateral de `.doc-main` — usa a largura cheia da coluna de doc, sem escrever CSS (ver seção 1 acima)
`sw-trans-style="X"`	Link `<a>`	Ao clicar, aplica o estilo de transição (`default`/`fade`/`zoom`/`circle`/`slide-y`/`scoped`) sem `onclick`
`sw-trans-name="X"`	Link `<a>`	Nomeia (`view-transition-name`) o `<main>` desta página antes de navegar — combine com `sw-morph="X"` na página de destino
`sw-trans-target="sel"`	Link `<a>`	Opcional — troca o alvo de `sw-trans-name` (padrão: `main`) por qualquer seletor CSS