A View Transitions API: transições suaves de página e de estado

A View Transitions API anima a mudança entre dois estados de uma página — uma lista que vira uma visão de detalhe, um tema sendo alternado, um item sendo filtrado — com quase nenhum código de animação. O navegador captura um instantâneo do estado antigo, um do novo e faz um cross-fade (ou uma transformação) entre eles para você.

Transições no mesmo documento

Para mudanças de estado dentro de uma única página — uma single-page app atualizando o DOM — envolva a atualização do DOM em document.startViewTransition():

function showDetail(item) {
  if (!document.startViewTransition) {
    updateDOM(item); // no support: just update, no animation
    return;
  }
  document.startViewTransition(() => updateDOM(item));
}

A callback faz o seu trabalho normal no DOM. O navegador captura um instantâneo "antes" pouco antes de ela rodar e um "depois" assim que termina, e então anima entre os dois. O padrão é um cross-fade suave — já uma boa melhoria de graça.

Personalizar a animação com CSS

Durante uma transição, o navegador constrói uma árvore de pseudo-elementos que você pode estilizar. O gancho mais simples é o grupo de transição raiz:

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

Você mira no instantâneo de saída com ::view-transition-old() e no de entrada com ::view-transition-new(), e então aplica qualquer animação CSS que quiser.

Animar um elemento específico entre os estados

Para fazer um elemento parecer mover-se e transformar-se entre os dois estados — uma miniatura crescendo até uma imagem completa — dê a ele um view-transition-name compartilhado em ambos os estados:

.hero-image {
  view-transition-name: hero;
}

O nome deve ser único na página a qualquer momento. Quando o navegador encontra o mesmo nome antes e depois, ele interpola a posição e o tamanho desse elemento diretamente em vez de fazer o cross-fade, produzindo um efeito contínuo de "elemento compartilhado".

Transições entre documentos (MPA)

Sites de múltiplas páginas também podem fazer transições entre navegações de página completas, sem JavaScript. Ative pelo CSS em ambas as páginas:

@view-transition {
  navigation: auto;
}

Com essa única regra, as navegações de mesma origem animam automaticamente. Valores view-transition-name correspondentes em ambas as páginas permitem que um elemento — digamos, a imagem hero de um post — seja transportado da página de lista para a página do artigo.

Referência rápida

Objetivo	API
Mudança de estado SPA	document.startViewTransition(cb)
Navegação MPA	@view-transition { navigation: auto }
Estilizar o fade	::view-transition-old/new(root)
Elemento compartilhado	view-transition-name (único)

Suporte e progressive enhancement

As transições no mesmo documento estão disponíveis nos navegadores Chromium e no Safari; o suporte entre documentos está sendo lançado e o Firefox está implementando ambos. Como você se protege com if (!document.startViewTransition) e a versão entre documentos é um opt-in puramente CSS, a API degrada graciosamente: navegadores sem suporte simplesmente atualizam a página sem animação. Isso a torna segura para adicionar hoje como progressive enhancement.

Recorra às view transitions quando um salto entre estados parecer abrupto. Uma pequena quantidade de movimento dá aos usuários uma sensação de continuidade — de onde as coisas vieram e para onde foram — sem que você escreva à mão um único keyframe na maioria dos casos.