面试题：Vue 中如何实现一个简单的过渡动画

Question

请阐述在 Vue 项目里，使用内置的过渡组件 `<transition>` 实现一个元素淡入淡出动画的步骤，并给出相应的代码示例，包括 CSS 样式部分。

Answer 1

1. 步骤阐述：
   • 在模板中包裹需要添加淡入淡出动画的元素，使用<transition>组件。
   • 定义相应的CSS类来控制淡入淡出的过渡效果，包括初始状态、进入过渡状态、进入完成状态、离开过渡状态、离开完成状态。
   • 在Vue实例或组件中，通过数据绑定或其他逻辑来控制元素的显示与隐藏，从而触发<transition>组件的过渡效果。
2. 代码示例：
   • Vue模板部分：

<template>
  <div>
    <button @click="show =!show">Toggle</button>
    <transition name="fade">
      <div v-if="show" class="box">
        This is a box with fade in - out animation.
      </div>
    </transition>
  </div>
</template>

• Vue脚本部分：

<script>
export default {
  data() {
    return {
      show: false
    };
  }
};
</script>

• CSS样式部分：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.box {
  background-color: lightblue;
  padding: 20px;
}