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:

Motion の AnimatePresence コンポーネントを使用して終了アニメーションを実装するためのガイドライン。 DOM から離れる要素をアニメーション化する場合、ネストされた出口を調整する場合、またはプレゼンス状態を管理する場合に使用します。 React の終了アニメーション、アンマウント トランジション、またはモーション ライブラリ パターンを含むタスクをトリガーします。 ソース: raphaelsalaja/userinterface-wiki。

原文を見る