Guía de lectura localizada
vercel-react-view-transitionsFinalidad, uso y origen
Guía para implementar animaciones fluidas y con sensación nativa utilizando la API View Transition de React ( component, agregarTipo de Transición, 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, iniciarTransición de vista, ViewTransition, tipos de transición, o preguntas sobre cómo animar entre estados de la interfaz de usuario en React sin bibliotecas de animación de terceros.
Fuente recuperada:
- Repositorio de origen
- vercel-labs/agent-skills
- SKILL.md
skills/react-view-transitions/SKILL.md- Estrellas del repositorio
- 33,269
- Actualización del repositorio
- 2026-10-29
- Clasificación de habilidades
- Desarrollo
- Última recopilación
Licencia: No especificado
Los extractos del flujo de trabajo son guías de lectura, no instrucciones ejecutables de Codez. No se utilizó ninguna habilidad de terceros para generar esta página.
Los siguientes fragmentos sobre el propósito y el flujo de trabajo son material preliminar, organizado y traducido para su lectura. Son distintos del análisis editorial de Codez, que se presenta por separado.
Lo que hace esta habilidad
Guía para implementar animaciones fluidas y con sensación nativa utilizando la API View Transition de React ( component, agregarTipo de Transición, 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, iniciarTransición de vista, ViewTransition, tipos de transición, o preguntas sobre cómo animar entre estados de la interfaz de usuario en React sin bibliotecas de animación de terceros.
Cómo funciona el flujo de trabajo ascendente
Flujo de trabajo de implementación
Al agregar transiciones de vista a una aplicación existente, siga estos pasos:references/implementation.mdpaso a paso. Empiece con la auditoría; no la omita. Utilicereferences/css-recipes.mdpara el CSS aplicable y adaptarlo a la aplicación.
Paso río arriba · L51 ↗Cuándo animar
Cada debe comunicar una relación espacial o continuidad. Si no puedes articular lo que comunica, no lo añadas. Implementa todos los patrones aplicables de esta lista, en este orden: Este es un orden de implementación, no una lista para elegir uno. Implementa cada patrón que se ajuste a la aplicación. Solo omite un patrón si la aplicación no tiene un caso de uso para él.
Transiciones de vista de React
Animar entre estados de la interfaz de usuario utilizando la función nativa del navegador.document.startViewTransition. Declara *qué* con , trigger *when* with iniciarTransición / usarValorAplazado / Controla *cómo* funciona el suspenso con clases CSS. Los navegadores no compatibles omiten las animaciones correctamente.
import { ViewTransition } from 'react';
<ViewTransition>
<Component />
</ViewTransition>Requisitos y configuración
No se seleccionó ningún fragmento de requisitos breves de este archivo. Esto no significa que la habilidad no tenga dependencias. Consulte las instrucciones de configuración del repositorio y los archivos de referencia.
Límites y controles de calidad
Limitación de VT anidada
Cuando un padre VTmounts/unmountscomo una unidad con VT anidados en su interior, los anidados no disparan los suyos propios.enter/exit— solo se anima el VT más externo. (Un VT hijo montado dentro de un VT padre *persistente* se activaenter/exitnormalmente.) Las animaciones escalonadas por elemento durante la navegación de página no están disponibles actualmente enNext.jsConsulte la sección de solución de problemas para conocer el estado experimental del proyecto.
Paso río arriba · L304 ↗Comience con una prueba segura.
- Verifique el host compatible y las instrucciones de instalación del repositorio. Mantenga juntos el directorio Skill y sus scripts, recursos y documentación a los que hace referencia;SKILL.mdsolo puede omitir dependencias.
- Proporcione al agente sus datos reales, el resultado deseado y los criterios de aceptación. La sintaxis de invocación y las herramientas disponibles dependen del sistema anfitrión; este sitio no presupone un comando de instalación universal.
- Pruebe el flujo de trabajo original en un proyecto desechable o en una copia. Revise las operaciones que modifican archivos, servicios remotos o recursos facturables antes de autorizarlas.
- Valide el resultado comparándolo con los controles de calidad de origen y sus propios requisitos. Un activador exitoso o un alto número de estrellas en el repositorio no garantizan un resultado correcto.
Lea más en la fuente
- Transiciones de vista de React
- Cuándo animar
- Elegir un estilo de animación
- Disponibilidad
- Flujo de trabajo de implementación
- El
Componente - Disparadores de animación
- Regla de colocación crítica
- Accesorios
- Pseudoelementos CSS
- Tipos de transición
router.back()y el botón Atrás del navegador- Tipos y suspenso
- Preparación para elementos compartidos
- Transiciones de elementos compartidos
- Reordenar la lista
- Diseño Desplazamiento Morfología
- Composición de elementos compartidos con identidad de lista
- Reingresar forzosamente con
key - Suspenso. Retorno al contenido.
- Cómo interactúan múltiples VT
- Usar
default="none"Deliberadamente - Dos patrones coexisten
- Limitación de VT anidada
- Next.jsIntegración
- Accesibilidad
- Archivos de referencia
- Documento completo compilado
Habilidades relacionadas
Traducción y alcance
Esta guía de lectura selecciona pasajes de la sección fijada en la parte superior.SKILL.mdLa traducción es asistida. No se trata de un manual completo ni garantiza la compatibilidad. Lea el original y los archivos a los que hace referencia antes de usarlo.
Esta introducción hace referencia a la versión fijada a continuación; la actividad actual del repositorio y la hora de recopilación se muestran por separado.
- Fuente fijada
- Lee el original ↗
- Fuente recuperada
- Confirmación de origen
1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62- Fuente SHA-256
693acbddd1d2dcf774286867efbc9a5c09dce2da6f21f8e12618187a92f2106a