A API View Transitions: mudanças suaves de página e estado no navegador
O que a API View Transitions faz, como funcionam as transições entre documentos e entre documentos, como estilizá-las com CSS e como usá-las com responsabilidade.
Ponto principal
A API View Transitions permite que o navegador faça animação entre dois estados de uma página. Chame document.startViewTransition() com uma função que atualiza o DOM, e o navegador captura instantâneos das visualizações antigas e novas e anima entre elas, que você pode estilizar com pseudoelementos ::view-transition. Ele funciona em aplicativos de página única e, em navegadores de suporte, em navegações de páginas.
Como funciona
MDN descreve document.startViewTransition() como o início de uma transição de visualização do mesmo documento, típica em aplicativos de página única. O navegador captura a visualização atual, executa sua atualização, captura a nova visualização e faz animação entre elas. Por padrão, isso é um cross-fade; CSS permite alterá-lo.
Mesmo documento e documento cruzado
As transições entre documentos são executadas dentro de uma página, como em SPAs, e Chrome as suporta desde Chrome 111. As transições entre documentos são animadas entre páginas separadas em sites de várias páginas, o que MDN observa historicamente ser impossível; eles usam os eventos pageswap e pagereveal e um opt-in no CSS. O suporte do navegador difere entre os dois, portanto verifique as tabelas de compatibilidade atuais.
Estilizando a transição
A maior parte da personalização é simples CSS:
- Dê a um elemento um nome de transição de visualização para animá-lo separadamente do resto da página, como uma miniatura crescendo em uma imagem principal.
- Target ::view-transition-old() e ::view-transition-new() para personalizar a animação.
- Mantenha as durações curtas e o movimento significativo.
- Envolva animações personalizadas em verificações de movimento reduzido.
Aprimoramento progressivo
Sempre verifique o suporte antes de chamar a API e atualize o DOM diretamente se ele estiver faltando. A página deve funcionar de forma idêntica sem a animação. Evite longas transições na navegação, que tornam todo o site mais lento.
Trecho de implementação em produção
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}Princípios-chave para lembrar
- startViewTransition() captura instantâneos de visualizações antigas e novas e faz animações entre elas
- Existem variantes para o mesmo documento (SPA) e entre documentos (várias páginas)
- Estilo com pseudoelementos view-transition-name e ::view-transition
- Verifique o suporte e volte para uma atualização instantânea
- Mantenha as transições curtas e respeite o movimento reduzido
Perguntas frequentes
Fontes
- View Transition API — Documentos da Web MDN
- Smooth transitions with the View Transition API — Chrome para desenvolvedores