react-view-transitions

IMPLEMENTAR animaciones suaves con sensación nativa usando la API View Transition de React (`<ViewTransition>`, `addTransitionType` y pseudo-elementos CSS de view transition). Usar para transiciones de página, cambios de ruta, animaciones de elementos compartidos, animaciones de entrada/salida, reorden de listas, navegación direccional. Soporte de navegador: Chromium 111+, Firefox 144+, Safari 18.2+. Degradación elegante en navegadores sin soporte. Nunca llamar `document.startViewTransition` directamente, usar el componente `<ViewTransition>`.

Zur Installation springen

Repository: ChloeVPin/candy-skills
Letzte Quellaktivität: 29. Juni 2026 um 23:03
Erkannte Sprache von SKILL.md: Spanisch
Sterne: 0
Forks: 0

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

Zurück zur Suche Zurück zur Installation

name	React View Transitions
description	IMPLEMENTAR animaciones suaves con sensación nativa usando la API View Transition de React (`<ViewTransition>`, `addTransitionType` y pseudo-elementos CSS de view transition). Usar para transiciones de página, cambios de ruta, animaciones de elementos compartidos, animaciones de entrada/salida, reorden de listas, navegación direccional. Soporte de navegador: Chromium 111+, Firefox 144+, Safari 18.2+. Degradación elegante en navegadores sin soporte. Nunca llamar `document.startViewTransition` directamente, usar el componente `<ViewTransition>`.
license	MIT
metadata	{"author":"vercel","version":"2.0.0","last_updated":"2026-06-28T00:00:00.000Z"}
stacks	["React 19.2","Next.js 16 (App Router)"]
tags	["animations","view-transitions","react-19"]
related_skills	["responsive-layout-math","accessibility-audit-protocol","component-architecture-patterns","react-best-practices"]
category	react
version	2.0.0
lang	es
direction	ltr
source_version	2.0.0
translated_at	2026-06-29T00:00:00.000Z

React View Transitions

IDENTIFICAR: Cuándo activarse

Activar cuando el usuario quiere añadir:

Transiciones de página entre rutas
Animaciones de elementos compartidos (elemento se transforma entre pantallas)
Animaciones de reorden de listas
Animaciones de entrada/salida para componentes que aparecen/desaparecen
Navegación direccional (transiciones adelante/atrás)
O menciona: "view transitions", "startViewTransition", "ViewTransition", "animate between pages"

DECIDIR: Selección de Patrón de Animación

Para cada oportunidad de transición, implementar TODOS los patrones aplicables, en este orden de prioridad:

Prioridad 1: Elemento compartido, aparece en páginas origen y destino
  → Usar <ViewTransition name="id-único" share="morph">
  → Comunica: "Misma cosa, profundizando"

Prioridad 2: Revelación Suspense, contenido carga de forma asíncrona
  → Usar <ViewTransition enter="fade-in" default="none">
  → Comunica: "Datos cargados"

Prioridad 3: Identidad de lista, elementos reorganizados
  → Usar <ViewTransition key={item.id}> por elemento
  → Comunica: "Mismos elementos, nueva disposición"

Prioridad 4: Cambio de estado, componente entra/sale
  → Usar <ViewTransition enter="slide-in" exit="slide-out">
  → Comunica: "Algo apareció/desapareció"

Prioridad 5: Cambio de ruta, navegando entre páginas
  → Usar ViewTransition con clave de tipo + addTransitionType
  → Comunica: "Yendo a un nuevo lugar"

SELECCIÓN DE ESTILO DE ANIMACIÓN

Contexto de Navegación	Animación	Por qué
Jerárquica (lista → detalle)	Direccional: `nav-forward` / `nav-back`	Comunica profundidad espacial
Lateral (pestaña → pestaña)	Fundido (`default="none"`) o sin animación	Sin profundidad que comunicar
Revelación Suspense	Props de cadena `enter`/`exit`	Contenido llegando
Actualización en segundo plano	`default="none"`	Silencioso, sin animación necesaria

EJECUTAR: Flujo de Implementación

Paso 1: Auditar Oportunidades de Transición

Identificar TODAS estas antes de escribir código:

Elementos que aparecen en múltiples páginas (candidatos a elemento compartido)
Rutas de navegación (jerárquica vs lateral vs atrás)

// Página origen, miniatura
<ViewTransition name={`hero-image-${id}`} share="morph">
  <Image src="/thumb.jpg" />
</ViewTransition>

// Página destino, tamaño completo (mismo nombre)
<ViewTransition name={`hero-image-${id}`} share="morph">
  <Image src="/full.jpg" />
</ViewTransition>

// Componente wrapper
export function DirectionalTransition({ children }: { children: React.ReactNode }) {
  return (
    <ViewTransition
      enter={{ 'nav-forward': 'slide-from-right', 'nav-back': 'slide-from-left', default: 'none' }}
      exit={{ 'nav-forward': 'slide-to-left', 'nav-back': 'slide-to-right', default: 'none' }}
      default="none"
    >
      {children}
    </ViewTransition>
  );
}

// Disparar navegación con tipo
startTransition(() => {
  addTransitionType('nav-forward');
  router.push('/detail/1');
});

// Revelación de contenido, separada de transiciones de navegación
<ViewTransition enter="fade-in" default="none">
  <Suspense fallback={<Skeleton />}>
    <Content />
  </Suspense>
</ViewTransition>

{items.map(item => (
  <ViewTransition key={item.id} default="none">
    <ItemCard item={item} />
  </ViewTransition>
))}

{items.map(item => (
  <ViewTransition key={item.id} default="none">                   {/* identidad de lista */}
    <ViewTransition name={`item-image-${item.id}`} share="morph" default="none"> {/* elemento compartido */}
      <Image src={item.image} />
    </ViewTransition>
  </ViewTransition>
))}

/* SIEMPRE incluir movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

1. SIEMPRE establecer default="none" en CADA ViewTransition, previene fundido cruzado en Suspense/resync
2. SIEMPRE usar nombres únicos para elementos compartidos, nombres duplicados rompen los morphs
3. SIEMPRE emparejar enter con exit, animaciones asimétricas confunden a los usuarios
4. NUNCA llamar document.startViewTransition, usar componente <ViewTransition>
5. NUNCA escribir keyframes de animación personalizados, usar recetas CSS de references/
6. SIEMPRE incluir CSS de movimiento reducido en la hoja de estilos global
7. SIEMPRE mantener <ViewTransition> como el wrapper más externo, enter/exit se activan solo cuando VT es el primer nodo DOM

- router.back() y atrás/adelante del navegador NO disparan view transitions
  → Usar router.push() con URL explícita en su lugar
- VT anidados enter/exit: exit del padre suprime enter/exit del hijo
  → Solo el VT más externo se anima durante las salidas de página
- Tipos disponibles durante navegación pero NO durante revelaciones Suspense
  → Usar mapas de tipo para enter/exit de página, cadenas simples para Suspense

Antipatrón	Por qué está mal	Solución
`document.startViewTransition()`	API cruda evade el ciclo de vida de React	Usar componente `<ViewTransition>`
Sin `default="none"`	Cada resolución de Suspense dispara fundido cruzado	SIEMPRE establecer `default="none"`
Nombres duplicados de elementos compartidos	Dos VT con el mismo nombre montan → morph roto	Usar IDs únicos: `photo-${id}`
Deslizamientos direccionales para nav lateral	Implica falsamente profundidad espacial	Usar fundido o sin animación
Keyframes de animación personalizados desde cero	Inconsistente, más difícil de mantener	Usar recetas CSS de references/