API View Transitions

A API de transições de visualização (Chrome 111+) permite transições suaves e animadas entre diferentes estados de uma página ou entre navegações de páginas. Ela captura imagens antes e depois e faz uma transformação gradual entre elas usando animações de CSS — permitindo transições semelhantes às de aplicativos na internet.

Acione uma transição na mesma página envolvendo uma atualização do DOM em document.startViewTransition(() => updateDom()). O navegador captura o estado antigo, executa a atualização, captura o novo estado e faz uma dissolução gradual entre eles automaticamente.

Sem nenhum CSS, View Transitions executa uma simples dissolução gradual entre os estados antigo e novo da página. Essa única linha de JavaScript adiciona uma transição refinada que antes exigia uma orquestração complexa de animações de CSS ou uma biblioteca de animação dedicada.

A API expõe quatro pseudo-elementos: ::view-transition (sobreposição raiz), ::view-transition-old(root) (imagem da página antiga), ::view-transition-new(root) (imagem da página nova) e ::view-transition-image-pair(root). Personalize-os com animações de CSS.

Atribua view-transition-name: hero-image a um elemento que permanece durante a transição. A API transforma esse elemento da posição e do tamanho antigos para a posição e o tamanho novos — criando automaticamente uma animação suave no nível do elemento.

Substitua a dissolução gradual padrão por quadros-chave personalizados nos pseudo-elementos: faça a entrada pela direita em uma navegação para frente e pela esquerda ao voltar. Direcione ::view-transition-new(root) e ::view-transition-old(root) com @keyframes.

As transições de visualização entre documentos (Chrome 126+) animam navegações de páginas completas em aplicações de várias páginas. Adicione @view-transition { navigation: auto; } ao CSS — o navegador gerencia automaticamente a transição entre páginas HTML, sem necessidade de JavaScript.

Usuários com distúrbios vestibulares não devem experimentar transições com muito movimento. Envolva as animações de transição em @media (prefers-reduced-motion: no-preference) para desativar as animações personalizadas para usuários que preferem menos movimento, mantendo a atualização funcional do DOM.

React Router v6.4+, Vue Router e Astro são compatíveis com View Transitions. As estruturas envolvem automaticamente as mudanças de rota em startViewTransition. Configure estilos de transição por rota com view-transition-name em elementos persistentes, como a navegação e as estruturas do layout.

View Transitions captura imagens da página, o que pode ser dispendioso em layouts complexos. Páginas grandes com muitas camadas compostas podem apresentar travamentos durante a captura. Mantenha a duração da transição abaixo de 300 ms e evite fazer transições em subárvores extremamente complexas.

Verifique se a API está disponível antes de usá-la: if (!document.startViewTransition) { updateDom(); return; }. A alternativa atualiza o DOM normalmente, sem animação. View Transitions é um aprimoramento progressivo — o aplicativo funciona sem esse recurso; ele apenas melhora a experiência onde houver suporte.

O que view-transition-name em um elemento permite durante uma transição de visualização?

A API de transições de visualização permite animações de dissolução gradual e transformação entre estados do DOM ou navegações de páginas com o mínimo de código. Elementos de transição nomeados são transformados automaticamente; animações personalizadas de pseudo-elementos substituem a dissolução gradual padrão. Respeite prefers-reduced-motion e use aprimoramento progressivo para navegadores sem suporte.