Guia de leitura localizado
vercel-react-view-transitionsFinalidade, utilização e fonte
Guia para implementar animações suaves e com aparência nativa usando a API View Transition do React ( component, adicionarTipoDeTransição, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, iniciarTransiçãoDeVisão, ViewTransition, tipos de transição, ou perguntas sobre como animar entre estados da interface do usuário no React sem bibliotecas de animação de terceiros.
Fonte recuperada:
- Repositório de origem
- vercel-labs/agent-skills
- SKILL.md
skills/react-view-transitions/SKILL.md- Estrelas do repositório
- 33,269
- Atualização do repositório
- 2026-10-29
- Classificação de Habilidades
- Desenvolvimento
- Última coleta
Licença: Não especificado
Os trechos do fluxo de trabalho são auxiliares de leitura e não instruções executáveis do Codez. Nenhuma Skill de terceiros foi executada para gerar esta página.
Os trechos abaixo, que descrevem o propósito e o fluxo de trabalho, são material original, organizado e traduzido para facilitar a leitura. Eles são distintos da análise editorial da Codez, que possui uma etiqueta separada.
O que esta habilidade faz
Guia para implementar animações suaves e com aparência nativa usando a API View Transition do React ( component, adicionarTipoDeTransição, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, iniciarTransiçãoDeVisão, ViewTransition, tipos de transição, ou perguntas sobre como animar entre estados da interface do usuário no React sem bibliotecas de animação de terceiros.
Como funciona o fluxo de trabalho upstream
Fluxo de trabalho de implementação
Ao adicionar transições de visualização a um aplicativo existente, siga as instruções abaixo.references/implementation.mdPasso a passo. Comece com a auditoria — não a pule. Usereferences/css-recipes.mdpara o CSS aplicável e adaptá-lo ao aplicativo.
Passagem a montante · L51 ↗Quando animar
Cada deve comunicar uma relação espacial ou continuidade. Se você não consegue articular o que ele comunica, não o adicione. Implemente todos os padrões aplicáveis desta lista, nesta ordem: Esta é uma ordem de implementação, não uma lista de "escolha um". Implemente todos os padrões que se adequam ao aplicativo. Só ignore um padrão se o aplicativo não tiver casos de uso para ele.
Transições de visualização React
Faça animações entre estados da interface do usuário usando os recursos nativos do navegador.document.startViewTransitionDeclare *o quê* com , trigger *when* with iniciarTransição / usarValorAdiado / Suspense: controle *como* as animações são exibidas com classes CSS. Navegadores não compatíveis ignoram as animações de forma elegante.
import { ViewTransition } from 'react';
<ViewTransition>
<Component />
</ViewTransition>Requisitos e configuração
Nenhuma passagem de requisitos resumida foi selecionada deste arquivo. Isso não significa que a Skill não tenha dependências. Verifique as instruções de configuração do repositório e os arquivos referenciados.
Limites e verificações de qualidade
Limitação VT aninhada
Quando um pai VTmounts/unmountsComo uma única unidade com VTs aninhados dentro dela, os VTs aninhados não disparam seus próprios.enter/exit— apenas o VT mais externo é animado. (Um VT filho montado dentro de um VT pai *persistente* é acionado)enter/exit(normalmente.) Animações escalonadas por item durante a navegação de página não estão disponíveis no momento.Next.js; consulte a seção de solução de problemas para obter informações sobre o status experimental a montante.
Passagem a montante · L304 ↗Comece com um teste seguro.
- Verifique o host compatível e as instruções de instalação do repositório. Mantenha o diretório Skill e seus scripts, recursos e documentação referenciados juntos;SKILL.mdsozinho pode omitir dependências.
- Forneça ao agente suas entradas reais, a saída desejada e os critérios de aceitação. A sintaxe de invocação e as ferramentas disponíveis dependem do host; este site não pressupõe um comando de instalação universal.
- Teste o fluxo de trabalho original em um projeto descartável ou em uma cópia. Analise as operações que alteram arquivos, serviços remotos ou recursos faturáveis antes de permiti-las.
- Valide o resultado comparando-o com as verificações de qualidade da fonte e com seus próprios requisitos. Um gatilho bem-sucedido ou uma alta contagem de estrelas no repositório não garantem um resultado correto.
Leia mais na fonte.
- Transições de visualização React
- Quando animar
- Escolhendo o estilo de animação
- Disponibilidade
- Fluxo de trabalho de implementação
- O componente
- Gatilhos de animação
- Regra de Posicionamento Crítico
- Adereços
- Pseudo-elementos CSS
- Tipos de transição
router.back()e o botão Voltar do navegador- Tipos e Suspense
- Prontidão de Elemento Compartilhado
- Transições de elementos compartilhados
- Reordenar lista
- Deslocamento de layout Morf
- Compondo elementos compartilhados com identidade de lista
- Forçar reentrada com
key - Suspense: Recurso de Recurso ao Conteúdo
- Como múltiplos VTs interagem
- Usar
default="none"Deliberadamente - Dois padrões coexistem
- Limitação VT aninhada
- Next.jsIntegração
- Acessibilidade
- Arquivos de referência
- Documento totalmente compilado
Habilidades relacionadas
Tradução e escopo
Este guia de leitura seleciona trechos do texto fixado a montante.SKILL.mdA tradução foi feita com auxílio de ferramentas. Este não é um manual completo nem garante compatibilidade comprovada. Leia o original e os arquivos referenciados antes de usar.
Esta introdução refere-se à versão fixada abaixo; a atividade atual do repositório e o tempo de coleta são mostrados separadamente.
- Fonte fixada
- Leia o original ↗
- Fonte recuperada
- Commit de origem
1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62- Fonte SHA-256
693acbddd1d2dcf774286867efbc9a5c09dce2da6f21f8e12618187a92f2106a