面试题：Vue中如何使用v - show指令实现简单的淡入淡出动画效果

Question

请描述在Vue项目中，利用v - show指令结合CSS过渡（transition）属性来实现元素淡入淡出动画效果的具体步骤，包括在template、script和style部分的代码示例。

Answer 1

1. Template部分

在模板中，使用v - show指令来控制元素的显示与隐藏，并为元素添加一个类名用于CSS过渡：

<template>
  <div>
    <button @click="toggle">切换显示</button>
    <div v - show="isVisible" class="fade - in - out">
      这是一个淡入淡出的元素
    </div>
  </div>
</template>

2. Script部分

在脚本中，定义一个数据属性isVisible来控制元素的显示状态，并提供一个方法来切换这个状态：

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible =!this.isVisible;
    }
  }
};
</script>

3. Style部分

在样式中，定义.fade - in - out类的过渡效果：

<style scoped>
.fade - in - out {
  opacity: 1;
  transition: opacity 0.5s ease - in - out;
}
.fade - in - out[aria - hidden="true"] {
  opacity: 0;
}
</style>

上述代码实现了一个通过点击按钮，利用v - show指令结合CSS过渡属性来控制元素淡入淡出的效果。v - show指令根据isVisible的值控制元素的显示与隐藏，CSS的transition属性定义了淡入淡出的动画效果。当isVisible变化时，元素的opacity（透明度）会在0.5秒内以ease - in - out的方式过渡，从而实现淡入淡出的动画。