En los propios términos del Skill
Una guía para animar entre estados de la UI con la View Transition API de React: declare el qué con el componente ViewTransition, dispare el cuándo con startTransition, useDeferredValue o Suspense, y controle el cómo con clases CSS. Cubre cinco patrones en un orden de prioridad fijo, transformaciones de elementos compartidos, identidad de lista, cambio de estado y cambio de ruta, además de navegación direccional con claves de tipo mediante addTransitionType e integración con Next.js App Router.
Explica dónde debe ubicarse un límite de ViewTransition, cuándo se requiere default="none", qué navegadores lo admiten (Chromium 125+, Firefox 144+, Safari 18.2+) con degradación elegante en el resto, y remite a archivos de referencia para el orden de implementación, recetas CSS, patrones y resolución de problemas.
Qué produce
- Un componente contenedor direccional reutilizable que mantiene los mapas de entrada y salida con clave de tipo para aplicaciones de varias páginas.
- Morfos de elementos compartidos creados reutilizando el mismo nombre en las vistas que se desmontan y se montan, por ejemplo una miniatura que se convierte en una imagen destacada.
- Reglas CSS asociadas a los pseudoelementos de la transición de vista, incluido el par de imágenes que contiene ambas capturas.
- Una implementación que se degrada con elegancia, donde los navegadores no compatibles omiten la animación en lugar de romper la navegación.
Cómo funciona
- 01Determine Qué Expresa la Animación
Agregue un límite solo cuando pueda articular la relación espacial o la continuidad que expresa. Si no puede decir qué comunica, no lo agregue.
- 02Envuelva el Estado en un Límite
React asigna un view-transition-name único y llama a document.startViewTransition internamente, por lo que usted nunca llama a startViewTransition directamente.
- 03Dispárelo con una Transición
Los eventos de entrada, salida, actualización y compartición solo se disparan desde startTransition, useDeferredValue o Suspense. Un simple setState no animará nada.
- 04Estilice las Capturas en CSS
Las capturas salientes y entrantes se seleccionan mediante pseudoelementos de transición de vista con sus propios nombres de clase, y el archivo de recetas proporciona animaciones listas para usar.
- 05Etiquételo con Tipos de Transición
addTransitionType apila tipos de contexto para que distintos límites del árbol reaccionen de forma diferente, y un objeto por tipo mapea esos tipos a clases CSS en la entrada, salida y compartición.