Vue.js：如何为插槽内容添加Transition过渡效果？

1. 调整Modal组件内部结构 #

把遮罩层和插槽内容拆分，遮罩层直接通过v-if控制显示，插槽内容用Vue的<Transition>组件包裹，就能实现遮罩层立即显示、内容单独带过渡动画的效果：

<template>
  <div class="modal-container">
    <!-- 遮罩层：无过渡，直接显示/隐藏 -->
    <div class="modal-overlay" v-if="visible"></div>

    <!-- 插槽内容：用Transition包裹实现过渡 -->
    <Transition name="modal-content">
      <div class="slot-content" v-if="visible">
        <slot></slot>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(false)
// 保留你原有的显示/隐藏控制逻辑
</script>

2. 添加过渡动画的CSS样式 #

根据<Transition>的name属性，定义对应的进入、离开过渡样式，同时保留遮罩层的基础样式：

/* 遮罩层样式（保持立即显示） */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

/* 插槽内容的基础布局样式 */
.slot-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  z-index: 1001;
}

/* 内容进入动画 */
.modal-content-enter-from {
  opacity: 0;
  transform: translate(-50%, -60%); /* 初始状态向上偏移 */
}

.modal-content-enter-active {
  transition: all 0.3s ease;
}

/* 内容离开动画 */
.modal-content-leave-to {
  opacity: 0;
  transform: translate(-50%, -60%);
}

.modal-content-leave-active {
  transition: all 0.3s ease;
}

3. 外部调用方式不变 #

你原来的Modal使用代码不需要修改，依旧通过插槽传入自定义内容即可：

<Modal :visible="isModalShow">
  <div class="some-modal-content-div">
    <h2>模态框标题</h2>
    <p>这里是模态框的自定义内容</p>
    <button @click="isModalShow = false">关闭</button>
  </div>
</Modal>

核心逻辑说明 #

• 遮罩层未被<Transition>包裹，只要visible为true就会立即渲染，没有过渡延迟。
• 插槽内容被<Transition>包裹，会严格按照定义的CSS规则执行进入/离开动画，实现平滑过渡。

内容的提问来源于stack exchange，提问作者TommyF