Animate Presence

组件 AnimatePresence 允许您在由 v-if 或 v-show 指令控制时，对 Vue 树中的组件进行进入和退出时的动画处理。

导入

import { AnimatePresence } from 'motion-v'

使用

多重

集成 Radix

AnimatePresence 可以无缝集成到 Radix Vue 组件中。以下示例演示了如何向 Radix 对话框添加进入和退出动画：

属性

multiple

• 默认: False

AnimatePresence 基于 TransitionGroup 和 Transition，当 multiple 为 true 时，它将使用 TransitionGroup 来动画化多个子元素。

模式

• 默认: sync

决定 AnimatePresence 如何处理子元素的进入和退出。

• 同步：子元素在添加/删除后立即进行动画。
• wait：进入的子节点将等待直到退出的子节点动画结束。 ::alert{type="info" icon="lucide:info"} 注意：当前只能同时渲染一个子节点。
• popLayout：退出的子元素将被“弹出”页面布局。这允许周围的元素立即移动到它们的新布局。

unwrapElement

• 默认: False

當true時，AnimatePresence將使用第一個子元素作為過渡目標，而不是外層元素。當與像 Radix UI 的 PopoverContent 這樣渲染額外外層元素的組件一起使用時，這非常有用。