View Transitions API

Trocar de página, ou até só trocar o conteúdo de uma seção, sem aquele corte seco de "sumiu e apareceu" sempre exigiu bastante trabalho: animar manualmente a saída do elemento antigo, esperar a animação terminar, só então inserir o novo conteúdo e animar a entrada. A View Transitions API deixa o navegador cuidar dessa coreografia inteira, bastando envolver a mudança de DOM numa chamada de startViewTransition().

Como funciona

No modelo de página única (SPA), a transição é disparada passando a função que atualiza o DOM como callback para document.startViewTransition(). O navegador tira um "retrato" do estado atual da tela, executa o callback para aplicar as mudanças, tira outro retrato do novo estado, e anima automaticamente entre os dois:

function trocarConteudo(html) {
    if (!document.startViewTransition) {
        // navegador sem suporte: aplica direto, sem transição
        document.querySelector('#conteudo').innerHTML = html;
        return;
    }

    document.startViewTransition(() => {
        document.querySelector('#conteudo').innerHTML = html;
    });
}

Por padrão, isso já gera um crossfade suave entre o estado antigo e o novo, sem precisar escrever nenhuma animação.

Personalizando a animação com CSS

A transição roda numa árvore de pseudo-elementos própria, o "view transition tree", que pode ser estilizada como qualquer outra animação CSS:

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.4s;
}

::view-transition-old(root) {
    animation-name: sair-para-esquerda;
}

::view-transition-new(root) {
    animation-name: entrar-da-direita;
}

@keyframes sair-para-esquerda {
    to { transform: translateX(-30px); opacity: 0; }
}

@keyframes entrar-da-direita {
    from { transform: translateX(30px); opacity: 0; }
}

Transições nomeadas por elemento

É possível dar a um elemento específico sua própria transição individual, em vez de animar a página inteira, usando a propriedade view-transition-name. Isso é muito usado para o efeito de "imagem que voa" de uma lista até a página de detalhe:

.card-produto img {
    view-transition-name: imagem-produto;
}

Enquanto o nome for o mesmo antes e depois da mudança de DOM, o navegador anima a imagem morfando de posição e tamanho automaticamente, em vez de aplicar o crossfade padrão.

Transições entre páginas (MPA)

Desde que os documentos de origem e destino estejam na mesma origem, dá para ter view transitions também em navegações completas entre páginas, sem nenhum JavaScript. Basta declarar a regra @view-transition no CSS de ambas as páginas:

@view-transition {
    navigation: auto;
}

Com isso, toda navegação entre páginas do mesmo site passa a ser animada automaticamente, seguindo as mesmas regras de ::view-transition-old e ::view-transition-new usadas no modelo SPA.

Quando usar

• Transições entre rotas em SPAs, sem depender de bibliotecas de animação.
• Efeito de elemento compartilhado (imagem, título) voando de uma lista para uma página de detalhe.
• Trocar filtros, abas ou o conteúdo de um painel com uma animação suave em vez de um corte brusco.
• Sites tradicionais com navegação por páginas (MPA) que querem transições animadas só com CSS.

Cuidados

Sempre verifique document.startViewTransition antes de usar (feature detection), já que nem todo navegador suporta a API — sem esse cuidado, a atualização do conteúdo simplesmente não acontece nos navegadores sem suporte. Também vale respeitar a preferência de prefers-reduced-motion do usuário, desabilitando ou simplificando as animações quando ela estiver ativa.

Compatibilidade

O suporte a transições SPA já é bom nos navegadores baseados em Chromium; o modelo entre páginas (MPA) é mais recente e tem suporte mais limitado. Vale sempre conferir antes de usar em produção, principalmente se o projeto precisar suportar navegadores mais antigos.

caniuse

Conclusão

A View Transitions API tira do desenvolvedor a parte mais chata de animar mudanças de tela — orquestrar quando tirar o "antes" e o "depois" — e deixa isso a cargo do navegador, tanto dentro de uma SPA quanto entre páginas inteiras. É uma forma simples de dar polimento visual a uma aplicação sem adicionar uma biblioteca de animação inteira.