Animación e interacción
Animación realmente instalada y criterios para personalizarla.
Qué está instalado
Este checkout importa tw-animate-css desde src/app/globals.css. No hay una
dependencia de Animate UI ni Motion en el package.json inspeccionado.
El nombre «Animate» del recorrido se concreta aquí en la implementación real.
Dónde se definen las transiciones
| Archivo | Comportamiento observado en código |
|---|---|
| src/shared/ui/dialog.tsx | Entrada y salida con fade y zoom; duración de 100 ms |
| src/shared/ui/sheet.tsx | Fade, desplazamiento según lado y transición de 200 ms |
| src/shared/ui/spinner.tsx | Icono Loader2 con animate-spin |
Los estados de Radix controlan las clases data-open:* y data-closed:*.
Conserva la relación entre apertura, montaje y cierre; una animación de salida
no debe retrasar o impedir que el usuario recupere el foco.
Retoque recomendado
Para personalizar un diálogo, empieza por su composición local. Cambia el primitivo compartido solo cuando el comportamiento deba aplicarse a todos los diálogos. Mantén feedback visible durante consultas y mutations.
Prueba la preferencia de movimiento reducido y proporciona una alternativa estática adecuada donde añadas movimiento. Es un criterio de entrega, no una afirmación de que todos los componentes actuales ya lo implementen.