·mastering-animate-presence
</>

mastering-animate-presence

raphaelsalaja/userinterface-wiki

Lignes directrices pour la mise en œuvre d’animations de sortie avec le composant AnimatePresence de Motion. À utiliser pour animer des éléments quittant le DOM, coordonner des sorties imbriquées ou gérer l'état de présence. Déclencheurs sur des tâches impliquant des animations de sortie React, des transitions de démontage ou des modèles de bibliothèque de mouvements.

106Installations·0Tendance·@raphaelsalaja

Installation

$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:

Lignes directrices pour la mise en œuvre d’animations de sortie avec le composant AnimatePresence de Motion. À utiliser pour animer des éléments quittant le DOM, coordonner des sorties imbriquées ou gérer l'état de présence. Déclencheurs sur des tâches impliquant des animations de sortie React, des transitions de démontage ou des modèles de bibliothèque de mouvements. Source : raphaelsalaja/userinterface-wiki.

Voir l'original

Faits (prêts à citer)

Champs et commandes stables pour les citations IA/recherche.

Commande d'installation
npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill mastering-animate-presence
Catégorie
</>Développement
Vérifié
Première apparition
2026-02-01
Mis à jour
2026-02-18

Réponses rapides

Qu'est-ce que mastering-animate-presence ?

Lignes directrices pour la mise en œuvre d’animations de sortie avec le composant AnimatePresence de Motion. À utiliser pour animer des éléments quittant le DOM, coordonner des sorties imbriquées ou gérer l'état de présence. Déclencheurs sur des tâches impliquant des animations de sortie React, des transitions de démontage ou des modèles de bibliothèque de mouvements. Source : raphaelsalaja/userinterface-wiki.

Comment installer mastering-animate-presence ?

Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill mastering-animate-presence Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor

Où se trouve le dépôt source ?

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