Lzh on GitHub

Presence

管理带有过渡支持的元素的挂载和卸载。
问题 此组件与 Vue Transition 有何不同？A: 最大的区别是它接受 CSS 动画，并控制元素的可见性。

Presence 组件提供了对元素挂载/卸载的增强控制。它确保动画和过渡完成后才从 DOM 中移除元素，使其非常适合动画 UI 组件。

API 参考

Prop默认值类型说明
present*boolean有条件地挂载或卸载子元素。类似于 v-if。
forceMountboolean强制元素始终渲染。对于通过编程方式渲染具有暴露 present 的孙子组件很有用。

事件负载

事件EmitPayload类型说明
enterCustomEvent进入动画开始时调用的事件处理程序。
after-enterCustomEvent进入动画完成时调用的事件处理程序。
leaveCustomEvent离开动画开始时调用的事件处理程序。
after-leaveCustomEvent离开动画完成时调用的事件处理程序。
阅读我们的 动画指南 以了解更多关于使用 Presence 组件实现动画的信息。

示例

<template>
  <Presence :present="isVisible">
    <div
      :data-open="isVisible ? 'open' : 'close'"
      class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut"
    >
      <slot />
    </div>
  </Presence>
</template>

强制挂载

当您需要确保内容始终被渲染，无论是否存在状态时：

<template>
  <Presence v-slot="{ present }" :present="isVisible" :force-mount="true">
    <div>
      This content will always be rendered
      <div v-if="present">
        This content is hidden
      </div>
    </div>
  </Presence>
</template>

自定义例子

<script setup lang="ts">
import { ref } from 'vue'
import Presence from './Presence.vue' // 假设 Presence 组件放在同级目录

const isVisible = ref(false)

function toggle() {
  isVisible.value = !isVisible.value
}
</script>

<template>
  <button
    @click="toggle"
    class="mb-4 px-4 py-2 bg-blue-500 text-white rounded"
  >
    {{ isVisible ? '隐藏' : '显示' }} 面板
  </button>

  <Presence :present="isVisible">
    <template #default="{ present }">
      <div
        :data-state="present ? 'open' : 'closed'"
        class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut bg-gray-100 p-6 rounded shadow"
      >
        <p>我是一个带动画的面板</p>
      </div>
    </template>
  </Presence>
</template>

<style scoped>
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.animate-fadeIn {
  animation: fadeIn 300ms ease forwards;
}
.animate-fadeOut {
  animation: fadeOut 300ms ease forwards;
}
</style>