Chapter 96: AnimatePresence

Core Idea

Enable effortless exit animations in Vue with AnimatePresence. It animates components on removal via the exit prop.

Key Concepts

• Import: AnimatePresence works by detecting when its direct children are removed from the Vue tree.
• Exit animations: AnimatePresence works by detecting when its direct children are removed from the Vue tree.
• Changing key: Changing a key prop makes Vue create an entirely new component.
• Find & fix animation performance issues with your agent.: MotionScore for Agents grades animations in your source code S to F and hands your agent s
• Props: By passing :initial="false"
• initial: By passing :initial="false"
• custom: When a component is removed
• mode: Default: "sync"
• onExitComplete: Fires when all exiting nodes have completed animating out.

Code Examples

<AnimatePresence>
  <motion.div v-if="show" key="modal" :exit="{ opacity: 0 }" />}
</AnimatePresence>

• What it demonstrates: Core usage pattern for AnimatePresence.

Key Takeaways

1. AnimatePresence supports Import.
2. AnimatePresence supports Exit animations.
3. AnimatePresence supports Changing key.

Connects To

• Vue <motion /> component: related Motion doc page.
• Vue layout animations: related Motion doc page.
• Vue animations with Motion for Vue: related Motion doc page.
• Exit animation example & tutorial for React: related Motion doc page.