Nos termos do próprio skill
Um guia para animar entre estados de UI com a View Transition API do React: declare o quê com o componente ViewTransition, dispare quando com startTransition, useDeferredValue ou Suspense, e controle como com classes CSS. Ele cobre cinco padrões em uma ordem fixa de prioridade, morphs de elementos compartilhados, identidade de lista, mudança de estado e mudança de rota, além de navegação direcional com chave de tipo via addTransitionType e integração com o App Router do Next.js.
Explica onde um limite de ViewTransition deve estar, quando default="none" é necessário, quais navegadores oferecem suporte (Chromium 125+, Firefox 144+, Safari 18.2+) com degradação graciosa nos demais, e indica arquivos de referência para ordem de implementação, receitas de CSS, padrões e solução de problemas.
O que ele produz
- Um componente wrapper direcional reutilizável que mantém os mapas de entrada e saída com chave de tipo para aplicações multipágina.
- Transformações de elemento compartilhado criadas ao reutilizar o mesmo nome nas views que estão sendo desmontadas e montadas, por exemplo uma miniatura que se transforma em uma imagem principal.
- Regras CSS associadas aos pseudo-elementos de view transition, incluindo o par de imagens que contém os dois snapshots.
- Uma implementação com degradação graciosa, em que navegadores sem suporte simplesmente ignoram a animação em vez de comprometer a navegação.
Como funciona
- 01Descubra o Que a Animação Comunica
Só adicione um boundary quando você conseguir articular a relação espacial ou continuidade que ele expressa. Se você não conseguir dizer o que ele comunica, não o adicione.
- 02Envolva o Estado em um Boundary
O React atribui um view-transition-name único e chama document.startViewTransition internamente, então você nunca chama startViewTransition diretamente.
- 03Acione com uma Transition
Enter, exit, update e share só disparam a partir de startTransition, useDeferredValue ou Suspense. Um setState comum não anima nada.
- 04Estilize os Snapshots em CSS
Os snapshots de saída e de entrada são direcionados por pseudo-elementos de view transition que carregam suas próprias classes CSS, com o arquivo de receitas fornecendo animações prontas para uso.
- 05Marque com Transition Types
addTransitionType empilha tipos de contexto para que diferentes boundaries na árvore reajam de formas distintas, e um objeto por tipo mapeia esses tipos para classes CSS em enter, exit e share.