View Transitions: navegação fluida sem transformar o site em app

Resposta direta: a View Transition API permite animar mudanças de estado e navegações entre páginas do mesmo domínio sem recriar manualmente duas interfaces. Em um site multipágina, um opt-in em CSS pode produzir transição básica; elementos compartilhados exigem nomes e cuidado com estado. Implemente como aprimoramento progressivo, respeite redução de movimento, preserve foco e nunca esconda lentidão real com animação.

A API captura representações da interface antiga e nova e anima entre elas. Isso pode reduzir a sensação de ruptura quando o visitante abre um produto, filtra uma lista ou avança em uma jornada.

Dois modos de uso

Transição no mesmo documento

Em SPA ou componentes dinâmicos, o código chama document.startViewTransition e passa a atualização do DOM. O navegador captura o estado antigo, executa a mudança e anima para o novo.

Transição entre documentos

Em site multipágina, as duas páginas do mesmo origin podem aderir com a regra CSS @view-transition e navigation: auto. A navegação continua sendo uma navegação real, com URLs e documentos distintos.

O suporte varia; sem a API, o link deve funcionar normalmente.

Como o navegador constrói a animação

O mecanismo cria snapshots dos elementos participantes, atualiza ou troca o documento, captura a nova visão e anima as pseudo-partes old e new. Ao final, remove as camadas temporárias.

Por padrão, existe um cross-fade do documento. Elementos com view-transition-name podem ganhar continuidade própria, como a imagem de uma miniatura que se expande na página do produto.

Nomes precisam ser únicos no estado capturado. Duplicatas podem cancelar a transição.

Primeiro teste em um site multipágina

Comece em uma área de baixo risco e adicione o opt-in no CSS compartilhado. Teste home para serviço, lista para detalhe e voltar. O objetivo inicial é validar estabilidade, não criar coreografia.

As páginas precisam ser same-origin. Redirecionamento por outro origin pode impedir informações de ativação e a própria transição.

Não intercepte links só para forçar animação. Preserve abrir em nova aba, copiar endereço, histórico e navegação do navegador.

Elementos compartilhados

Atribua view-transition-name a elementos realmente equivalentes nos dois estados: imagem do produto, título ou cartão. O navegador anima geometria e conteúdo entre posições.

Evite nome fixo em vários cartões da lista. Defina dinamicamente apenas para o item escolhido ou use recursos compatíveis quando apropriado.

Remova nomes temporários após o término, principalmente quando a página pode entrar no bfcache. Estado persistido pode criar conflito ao voltar.

pageswap e pagereveal

Em transições cross-document, pageswap ocorre antes de a página anterior sair; pagereveal ocorre quando a nova aparece, inclusive após bfcache ou prerender.

Os eventos expõem a ViewTransition quando existe e informações de navegação. Isso permite decidir direção ou selecionar o elemento compartilhado com base nas URLs.

O código precisa tolerar activation ausente, redirects e navegadores sem suporte.

Tipos de transição

Tipos permitem escolher animações como avançar, voltar, adicionar ou remover, sem duplicar toda a lógica. O suporte a propriedades mais novas deve ser verificado na matriz de navegadores.

Não vincule direção visual apenas ao histórico sem considerar idioma e arquitetura. Um slide lateral pode ser confuso em interfaces que não representam sequência.

Use duração curta e easing previsível. O efeito deve orientar, não atrasar.

Estado estável antes de animar

A página nova precisa ter estilos críticos e estrutura inicial antes da captura. Se fonte, layout ou imagem mudam durante a animação, o usuário percebe salto.

CSS normalmente bloqueia renderização quando carregado de forma padrão. Recursos adicionados dinamicamente podem exigir estratégia. A documentação também descreve mecanismos de render blocking para conteúdo crítico.

Defina dimensões de imagens e fontes de fallback. Transição não elimina CLS.

Performance real versus performance percebida

A animação pode reduzir latência percebida, mas não diminui automaticamente TTFB, JavaScript ou peso de imagens. Meça LCP, INP, CLS, navegação e tempo até conteúdo útil.

Uma transição longa pode tornar um site rápido mais lento na percepção. Evite animar grandes filtros, sombras ou efeitos caros.

Use compositor quando possível e valide em aparelhos intermediários.

Acessibilidade e prefers-reduced-motion

Respeite a preferência de redução de movimento. Nessa condição, desative ou reduza deslocamento e duração, mantendo a navegação funcional.

Não use movimento como único indicador de mudança. Atualize título, heading, foco e regiões anunciadas de forma coerente.

Teste teclado e leitor de tela. Snapshot visual não substitui semântica.

Foco e interação

Depois de uma mudança no mesmo documento, mova foco apenas quando necessário e de forma previsível. Em navegação entre páginas, mantenha a lógica padrão ou um mecanismo de skip link.

Durante a transição, não permita que um overlay invisível capture cliques inesperados. O conteúdo novo torna-se interativo enquanto a animação termina, segundo o processo descrito pelo MDN.

Formulários e validação precisam continuar acessíveis sem efeito.

Integração com bfcache

pagereveal pode ocorrer quando um documento retorna do back-forward cache. Estado, rolagem e nomes de transição podem estar preservados.

Limpe identificadores temporários quando a transição terminar. Revalide apenas dados sensíveis ou voláteis, sem recarregar tudo.

Teste voltar e avançar repetidamente. Muitos bugs aparecem apenas no segundo ciclo.

Exemplo em catálogo

Na lista, a miniatura escolhida recebe um nome único. No detalhe, a imagem principal usa o mesmo nome. Ela parece mover-se e crescer, mantendo contexto.

Preço e estoque carregam normalmente. Se a API não existe, o link abre a página sem animação. Ao voltar, a lista recupera posição e remove o nome temporário.

A equipe monitora conversão, mas não presume que movimento melhora vendas.

Exemplo em site de serviços

Cards da home levam a páginas de Google Ads, Meta Ads e sites. Um ícone abstrato e a cor da seção fazem uma transição discreta; o heading recebe foco lógico.

O efeito dura pouco e é desativado com reduced motion. Páginas continuam renderizadas no servidor, com links rastreáveis.

Isso preserva SEO e sensação de continuidade sem construir uma SPA desnecessária.

Exemplo em filtros

Em uma página, filtros atualizam resultados no mesmo documento. A chamada à API envolve somente a troca da lista. Elementos persistentes podem usar escopo próprio quando houver suporte adequado.

O botão mantém estado acessível e o número de resultados é anunciado. Sem suporte, a atualização ocorre instantaneamente.

Evite animar centenas de itens individualmente.

Plano de implementação

1. Escolha uma jornada simples.
2. Garanta links e fallback.
3. Adicione o opt-in básico.
4. Teste em navegadores suportados e não suportados.
5. Respeite reduced motion.
6. Nomeie um elemento compartilhado.
7. Limpe o nome após a transição.
8. Teste bfcache e redirects.
9. Valide foco e leitor de tela.
10. Meça performance de campo.

Checklist de qualidade

• A navegação funciona sem JavaScript especial.
• URLs permanecem compartilháveis.
• Não há nomes duplicados.
• Duração não atrasa interação.
• Layout está estável antes da captura.
• Imagens têm dimensões definidas.
• Reduced motion é respeitado.
• Foco e headings fazem sentido.
• Voltar e avançar foram testados.
• Terceiros não reinicializam eventos.
• Métricas não duplicam page views.
• Existe forma rápida de desativar.

Erros frequentes

Os erros mais comuns são criar uma SPA só para ter animação, usar nomes repetidos, ignorar reduced motion e mascarar carregamento lento com um efeito longo.

Também ocorrem conflitos com bfcache, analytics duplicado e foco perdido. Trate transição como camada visual sobre uma arquitetura sólida.

Princípios de design de movimento

Use movimento para explicar continuidade espacial. Um cartão que vira detalhe comunica origem; uma página inteira girando não explica nada. A direção deve acompanhar a estrutura mental da jornada.

Mantenha durações consistentes e curtas. Elementos relacionados podem compartilhar timing; elementos independentes não precisam competir pela atenção. Evite animar texto longo, porque leitura e movimento simultâneos aumentam esforço.

Defina uma biblioteca pequena de transições: entrada de detalhe, troca de filtro e confirmação. Isso cria coerência e facilita testes em vez de permitir um efeito diferente por página.

Observabilidade em produção

Registre suporte do navegador, transição iniciada, concluída e ignorada, sem coletar conteúdo pessoal. Erros de promise e conflitos de nome devem aparecer no monitoramento.

Compare abandono e interação entre navegadores com e sem suporte, mas não trate a diferença como efeito causal sem experimento. Dispositivos e públicos podem ser diferentes.

Após cada release, teste as jornadas principais. Um novo componente de terceiros ou uma alteração de CSS pode afetar snapshots e duração.

Inclua captura de vídeo nos testes visuais para comparar regressões de movimento. Verifique páginas longas, rolagem intermediária, zoom e orientação do aparelho. A transição deve permanecer compreensível quando o usuário navega rapidamente ou interrompe a animação.

Perguntas frequentes

View Transitions exigem React?

Não. Funcionam em DOM comum e podem ser usadas em páginas multipágina do mesmo origin.

Preciso escrever JavaScript?

Para uma transição multipágina básica, o opt-in pode ser somente CSS. Personalizações avançadas usam eventos e scripts.

Isso melhora Core Web Vitals?

Não diretamente. Pode melhorar continuidade percebida, mas desempenho real ainda precisa ser otimizado.

Funciona em todos os navegadores?

O suporte varia por recurso e versão. Implemente fallback progressivo e consulte compatibilidade atual.

É bom para acessibilidade?

Pode ajudar contexto visual, desde que reduza movimento quando solicitado e preserve foco, semântica e controle.

Afeta SEO?

Não deve prejudicar se links, URLs e conteúdo continuarem acessíveis. Não use cloaking ou navegação dependente do efeito.

Conclusão

View Transitions dão acabamento a uma experiência que já funciona. A Open Leads cria sites com performance, SEO e conversão antes de adicionar movimento. Conheça os serviços de criação de sites, leia sobre bfcache e explore o blog.

Quer transformar tráfego em oportunidades reais? A Open Leads integra mídia paga, mensuração e criação de sites focados em conversão. Conheça os serviços da Open Leads.

Fontes consultadas

Consulte os materiais originais usados na pesquisa deste artigo.

• Using the View Transition API — MDN Web Docs
• View Transition API — MDN Web Docs
• Using view transition types — MDN Web Docs
• CSS View Transitions Module Level 1 — W3C