面试题：Vue 中如何在虚拟 DOM 基础上实现简单的元素过渡效果

Question

在 Vue 项目里，假设我们有一个按钮，点击按钮时一个 div 元素需要有淡入淡出的过渡效果。请描述实现此效果基于 Vue 虚拟 DOM 的基本思路，并给出主要的代码片段。

Answer 1

基本思路

1. 在 Vue 中，通过 transition 组件来实现过渡效果。Vue 的虚拟 DOM 会在元素插入、更新或移除时，自动为其添加或移除特定的 CSS 类名，基于这些类名定义过渡的 CSS 动画，从而实现淡入淡出效果。
2. 当按钮点击时，通过数据绑定控制 div 元素的显示与隐藏，transition 组件会根据元素状态变化（显示/隐藏）来触发过渡效果。

主要代码片段

1. 模板部分：

<template>
  <div>
    <button @click="toggleShow">点击切换</button>
    <transition name="fade">
      <div v-if="isShow" key="fadeDiv">这是要淡入淡出的 div</div>
    </transition>
  </div>
</template>

2. 脚本部分：

<script>
export default {
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    toggleShow() {
      this.isShow =!this.isShow;
    }
  }
}
</script>

3. CSS 部分：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}