📚前端面试题速记
Q17
★ ★ ★ ★ ★

Vue 3 中的 Transition 组件是如何工作的？

⚡ 速记答案（30 秒）

配合 v-if/v-show/动态组件，在元素进出时自动添加/移除一组过渡 class。默认 class：v-enter-from/active/to、v-leave-from/active/to。

📖 详细讲解

标准面试回答（推荐记住）

Transition 组件在子元素进入或离开 DOM 时自动添加过渡类名。进入时会依次添加 enter-from、enter-active、enter-to；离开时添加 leave-from、leave-active、leave-to。可以用 CSS 定义过渡效果，也可以用 JS 钩子控制动画。

过渡类名生命周期

进入 (Enter):

  1. v-enter-from: 插入前生效，插入下一帧移除。（初始状态）
  2. v-enter-active: 整个进入过程生效。（定义 transition 属性）
  3. v-enter-to: 插入下一帧生效，动画结束移除。（目标状态）

离开 (Leave):

  1. v-leave-from: 离开开始时生效。（初始状态）
  2. v-leave-active: 整个离开过程生效。（定义 transition/absolute positioning）
  3. v-leave-to: 离开下一帧生效。（目标状态）

JS 钩子与 Done 回调

当只使用 JS 钩子 (:css="false") 时，:enter 和 :leave 钩子必须调用 done 回调，否则它们会被同步调用，过渡立即完成。

原理

Vue 在操作 DOM (insert/remove) 时，会检查元素是否被 Transition 包裹。如果是，它会暂停原生的立即插入/删除，先应用类名/钩子，等待 transitionend 事件（或 done 调用）后再真正完成 DOM 操作（或移除）。

✅ 面试要点

  • •理解过渡类名的添加时机
  • •知道 CSS 和 JS 两种过渡方式
  • •了解 TransitionGroup 的用途

💻 代码示例

Transition 基础用法
<template>
  <button @click="show = !show">Toggle</button>
  
  <Transition name="fade">
    <div v-if="show" class="box">Hello</div>
  </Transition>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
CSS 过渡动画演示（可交互）
🎨 效果预览