Linee guida per l'implementazione delle animazioni di uscita con il componente AnimatePresence di Motion. Da utilizzare quando si animano elementi che escono dal DOM, si coordinano uscite nidificate o si gestisce lo stato di presenza. Si attiva su attività che coinvolgono animazioni di uscita di React, transizioni di smontaggio o pattern di librerie di movimento.
Installa rapidamente la skill AI mastering-animate-presence nel tuo ambiente di sviluppo tramite riga di comando
Fonte: raphaelsalaja/userinterface-wiki.
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:
Linee guida per l'implementazione delle animazioni di uscita con il componente AnimatePresence di Motion. Da utilizzare quando si animano elementi che escono dal DOM, si coordinano uscite nidificate o si gestisce lo stato di presenza. Si attiva su attività che coinvolgono animazioni di uscita di React, transizioni di smontaggio o pattern di librerie di movimento. Fonte: raphaelsalaja/userinterface-wiki.
Campi e comandi stabili per citazioni AI/ricerca.
npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill mastering-animate-presenceLinee guida per l'implementazione delle animazioni di uscita con il componente AnimatePresence di Motion. Da utilizzare quando si animano elementi che escono dal DOM, si coordinano uscite nidificate o si gestisce lo stato di presenza. Si attiva su attività che coinvolgono animazioni di uscita di React, transizioni di smontaggio o pattern di librerie di movimento. Fonte: raphaelsalaja/userinterface-wiki.
Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill mastering-animate-presence Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw
https://github.com/raphaelsalaja/userinterface-wiki