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.
Instalación
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.
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
Detalles
- Categoría
- </>Desarrollo
- Fuente
- skills.sh
- Primera vez visto
- 2026-02-01