View Transitions API: exemplos ao vivo para SPA e multipágina | We.Inc
Exemplos funcionais da View Transitions API: startViewTransition em uma lista que você pode embaralhar, elementos nomeados que se transformam, @view-transition entre páginas, types, React e suporte.
Exemplos da View Transitions API
A View Transitions API anima a passagem entre dois estados de uma página. Em um single-page app, envolva a atualização do DOM em document.startViewTransition(() => update()). Entre páginas da mesma origem, adicione @view-transition { navigation: auto; } nas duas páginas. Dê a um elemento um view-transition-name único e o navegador o transforma da posição antiga para a nova.
Dois tipos de view transition
Mesmo documento (SPA)
Entre documentos (MPA)
Como iniciar
document.startViewTransition()
@view-transition { navigation: auto; } nas duas páginas
Chrome e Edge
111 em diante
126 em diante
Safari
18 em diante
18.2 em diante
Firefox
144 em diante
Ainda sem suporte
Baseline
Recém-disponível (outubro de 2025)
Fora do Baseline
A maioria das explicações sobre view transitions descreve a árvore de pseudo-elementos e para por aí. Esta página começa com uma demo funcionando no seu navegador: embaralhe uma grade, abra um card em uma visualização de detalhes e veja os elementos nomeados se moverem. Depois traz o código de cada padrão, a configuração entre páginas e os fallbacks para navegadores sem suporte.
Aperte Embaralhar para reordenar a grade. Cada bloco tem o seu próprio view-transition-name, então cada um desliza para o novo lugar.
Clique em um bloco para abri-lo. O bloco de cor e o título se transformam na visualização de detalhes porque compartilham os nomes com ela.
Se o seu navegador não tiver a API, a demo ainda atualiza na hora e avisa você disso.
Copie os trechos abaixo para JavaScript puro, React e sites multipágina.
Todo view-transition-name na página precisa ser único no momento do snapshot. Um nome duplicado faz a promise ready ser rejeitada e a transição é pulada.
Use view-transition-name: match-element em uma transição no mesmo documento para nomear cada item de uma lista automaticamente.
Busque os dados antes de chamar startViewTransition. A renderização fica congelada enquanto o callback de atualização executa, então um callback lento parece um travamento.
Verifique se document.startViewTransition existe antes de chamá-lo e, se não existir, apenas execute a atualização.
Reduza as animações dentro de uma query prefers-reduced-motion: reduce; a mudança de estado continua acontecendo.
Perguntas frequentes
O que document.startViewTransition faz?
Ele tira um snapshot da página atual, executa o seu callback de atualização e anima do snapshot antigo para o novo estado ao vivo. Retorna um objeto ViewTransition com as promises ready, finished e updateCallbackDone e um método skipTransition().
Como adiciono view transitions entre páginas?
Coloque @view-transition { navigation: auto; } no CSS da página que você deixa e da página em que chega. As páginas precisam ter a mesma origem, e por padrão você ganha um cross-fade. Dê aos elementos correspondentes o mesmo view-transition-name nas duas páginas para transformá-los um no outro.
As view transitions funcionam no Firefox?
Transições no mesmo documento funcionam a partir do Firefox 144. Transições entre documentos não tinham suporte no Firefox quando este texto foi escrito, então nesses navegadores a navegação simplesmente acontece sem animação.
Como uso view transitions no React?
Chame document.startViewTransition e atualize o estado dentro de flushSync, do react-dom, para que o React escreva o novo DOM de forma síncrona antes de o navegador tirar o novo snapshot.
Como personalizo a animação?
Estilize os pseudo-elementos. ::view-transition-old(name) é o snapshot que sai e ::view-transition-new(name) o que entra, e ::view-transition-group(name) controla tamanho e posição. Use root como nome para a página inteira.
O que acontece durante uma transição
O navegador captura o estado atual como imagens, uma para a página e uma para cada elemento nomeado. Ele executa a sua atualização com a renderização pausada e depois captura o novo estado.
Em seguida monta uma árvore de pseudo-elementos acima da página: um grupo para cada nome, com uma imagem antiga e uma nova. Por padrão o grupo anima tamanho e posição enquanto as duas imagens fazem cross-fade, e é isso que cria a transformação.
Como nomear bem os elementos
Um nome liga um elemento do estado antigo a um do estado novo. A foto de um produto em uma lista e a foto grande na página de detalhes podem compartilhar um nome como product-42, e o navegador anima uma na outra.
Defina o nome só onde for necessário. Nomear um elemento que não muda ainda custa um snapshot separado.
Types para direções diferentes
startViewTransition também aceita um objeto de opções com uma função update e um array types. Um type como forwards ou backwards pode então ser identificado no CSS com o seletor :active-view-transition-type(), para que voltar deslize para o outro lado.
Para navegações entre páginas, o descritor types dentro de @view-transition define os types da mesma forma.
Transições no mesmo documento
startViewTransition com detecção de recurso
Navegadores sem a API executam a atualização direto, então nada quebra.
Transformar uma miniatura em um hero
Só um elemento pode ter o nome de cada vez, então defina-o na miniatura clicada logo antes da transição.
React
startViewTransition com flushSync
flushSync faz o React aplicar o novo DOM dentro do callback.
Transições entre documentos
Deslizar entre as páginas de um site multipágina
Inclua isto na folha de estilo de cada página que deve participar. Só funciona na mesma origem.
Referência da API
As peças da View Transitions API
Nome
Tipo
O que faz
document.startViewTransition(update)
Método
Inicia uma transição no mesmo documento e retorna um ViewTransition
ViewTransition.ready
Promise
Resolve quando os pseudo-elementos existem e a animação está para começar
ViewTransition.finished
Promise
Resolve quando a animação termina e o novo estado está ativo
ViewTransition.updateCallbackDone
Promise
Resolve quando o seu callback de atualização terminou
ViewTransition.skipTransition()
Método
Pula a animação; a atualização ainda é executada
Propriedade CSS
Dá a um elemento o seu próprio snapshot para a transformação
@view-transition
At-rule CSS
Habilita uma página para transições entre documentos
::view-transition-old() / -new()
Pseudo-elementos
Os snapshots que saem e que entram
::view-transition-group()
Pseudo-elemento
Anima tamanho e posição para um nome
pageswap / pagereveal
Eventos
Permitem que um script ajuste uma transição entre documentos
Porto
Campina
Brasa
Crepúsculo
Ardósia
Coral
A redução de movimento está ativada, então a mudança foi instantânea.
Seu navegador não tem suporte a view transitions, então a mudança foi instantânea.
Demo ao vivo
Embaralhe a grade ou abra um card. Cada bloco tem o seu próprio view-transition-name, então o navegador o anima até a nova posição.
Embaralhar
Voltar para a grade
O bloco de cor e o título se transformaram a partir da grade porque mantêm os mesmos nomes aqui.