Motion Vue

Animate Presence

Animate components when they're removed from the Vue tree.

The AnimatePresence component enables you to animate components as they enter and exit the Vue tree when controlled by v-if or v-show directives.

Import

import { AnimatePresence } from 'motion-v'

Usage

Multiple

Integration with Radix

AnimatePresence can be seamlessly integrated with Radix Vue components. The following example demonstrates how to add enter and exit animations to a Radix Dialog:

Props

multiple

  • Default: false

AnimatePresence is based on TransitionGroup and Transition, when multiple is true, it will use TransitionGroup to animate multiple children.

mode

  • Default: sync

Decides how AnimatePresence handles entering and exiting children.

  • sync: Children animate in/out as soon as they're added/removed.
  • wait: The entering child will wait until the exiting child has animated out.
  • popLayout: Exiting children will be "popped" out of the page layout. This allows surrounding elements to move to their new layout immediately.

unwrapElement

  • Default: false

When true, AnimatePresence will use the first child element as the transition target instead of the wrapper element. This is useful when working with components like Radix UI's PopoverContent that render an additional wrapper element.

Motion
LayoutGroup
like LayoutGroup in framer-motion, the LayoutGroup will detect the layout changes of its children and apply the layout animations.