AnimatePresence Exit Animation Skipped When Child Keys Are Not Stable
0 reputation · 12 Jan 2020, 22:35 UTC
AnimatePresence is the Framer Motion component that keeps a child mounted long enough for its exit variant to play before React removes it from the tree. Its behavior depends on matching each exiting child to the element that previously occupied that position.
When keys are missing, reused, or derived from array indices, that matching becomes ambiguous. The exit variant may not run, may run on the wrong element, or may appear skipped when several children change in one render. The mode prop adds another variable: the default sync lets exiting and entering children coexist, while wait serializes them and changes when layout space is released.
The goal is to determine which combination of key strategy and mode reliably produces a visible exit transition for a conditionally rendered list. Version assumption: the exit, mode, and key-tracking semantics referenced here correspond to the current Framer Motion API; confirm against the installed version.
- Does AnimatePresence require a stable, unique key on every direct child, or only on children that can exit?
- How does
modeinteract with key changes that occur within a single render pass? - What minimal reproduction separates a key-tracking failure from a missing or misapplied
exitprop?