Animate Presence

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.

  Note: Currently only render a single child at a time.

• popLayout: Exiting children will be "popped" out of the page layout. This allows surrounding elements to move to their new layout immediately.