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.

원본 보기