·mastering-animate-presence
</>

mastering-animate-presence

raphaelsalaja/userinterface-wiki

Directrices para implementar animaciones de salida con el componente AnimatePresence de Motion. Úselo al animar elementos que salen del DOM, coordinar salidas anidadas o administrar el estado de presencia. Activadores de tareas que involucran animaciones de salida de React, transiciones de desmontaje o patrones de biblioteca de movimiento.

106Instalaciones·0Tendencia·@raphaelsalaja

Instalación

$npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill mastering-animate-presence

SKILL.md

When elements leave the DOM, they're gone—no way to animate something that doesn't exist. Motion's AnimatePresence solves this by keeping departing elements mounted long enough to animate out.

| AnimatePresence | Wrapper that enables exit animations | | useIsPresent | Hook to read if component is exiting | | usePresence | Hook for manual exit control with safeToRemove | | propagate | Prop to enable nested exit animations | | mode | Controls timing between enter/exit (sync, wait, popLayout) |

Use useIsPresent when a component needs to know it's exiting:

Directrices para implementar animaciones de salida con el componente AnimatePresence de Motion. Úselo al animar elementos que salen del DOM, coordinar salidas anidadas o administrar el estado de presencia. Activadores de tareas que involucran animaciones de salida de React, transiciones de desmontaje o patrones de biblioteca de movimiento. Fuente: raphaelsalaja/userinterface-wiki.

Ver original

Datos (listos para citar)

Campos y comandos estables para citas de IA/búsqueda.

Comando de instalación
npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill mastering-animate-presence
Categoría
</>Desarrollo
Verificado
Primera vez visto
2026-02-01
Actualizado
2026-02-18

Respuestas rápidas

¿Qué es mastering-animate-presence?

Directrices para implementar animaciones de salida con el componente AnimatePresence de Motion. Úselo al animar elementos que salen del DOM, coordinar salidas anidadas o administrar el estado de presencia. Activadores de tareas que involucran animaciones de salida de React, transiciones de desmontaje o patrones de biblioteca de movimiento. Fuente: raphaelsalaja/userinterface-wiki.

¿Cómo instalo mastering-animate-presence?

Abre tu terminal o herramienta de línea de comandos (Terminal, iTerm, Windows Terminal, etc.) Copia y ejecuta este comando: npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill mastering-animate-presence Una vez instalado, el skill se configurará automáticamente en tu entorno de programación con IA y estará listo para usar en Claude Code o Cursor

¿Dónde está el repositorio de origen?

https://github.com/raphaelsalaja/userinterface-wiki