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

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.
Motion
The Motion component is a foundational DOM primitive that provides declarative animation capabilities.
LayoutGroup
like LayoutGroup in framer-motion, the LayoutGroup will detect the layout changes of its children and apply the layout animations.