title: Presence description: 管理元素的挂载与卸载，支持过渡效果。
Presence
管理元素的挂载与卸载，支持过渡效果。
Presence 组件提供了对元素挂载/卸载的增强控制。它能确保在从 DOM 中移除元素之前，动画和过渡效果已经完成，使其成为动画 UI 组件的理想选择。
API 参考
| Prop | Default | Type |
|---|---|---|
present* | boolean用于挂载或卸载子元素的条件，类似于 | |
forceMount | boolean强制元素始终渲染。
通过暴露的 |
| Emit | Payload |
|---|---|
enter | CustomEvent进入动画开始时调用的事件处理器。 |
after-enter | CustomEvent进入动画结束时调用的事件处理器。 |
leave | CustomEvent离开动画开始时调用的事件处理器。 |
after-leave | CustomEvent离开动画结束时调用的事件处理器。 |
tip
阅读我们的动画指南，以了解更多关于使用 Presence 组件实现动画的信息。
示例
vue
<template>
<Presence :present="isVisible">
<div
:data-state="isVisible ? 'open' : 'closed'"
class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut"
>
<slot />
</div>
</Presence>
</template>强制挂载
当你需要确保无论 present 状态如何，内容始终被渲染时：
vue
<template>
<Presence v-slot="{ present }" :present="isVisible" :force-mount="true">
<div>
此内容将始终被渲染
<div v-if="present">
此内容是隐藏的
</div>
</div>
</Presence>
</template>