vue2每隔三秒逐渐切换div

在 Vue.js 2 中，如果你想实现每三秒钟逐渐切换两个 `div` 的效果，你可以使用 `v-if` 和 `setTimeout` 结合来实现动画切换。这里是一个简单的例子：

<template>
  <div id="app">
    <button @click="startSwitch">开始切换</button>
    <transition name="fade" mode="out-in">
      <div v-if="showDiv1" class="my-div">
        Div 1
      </div>
      <div v-else-if="showDiv2" class="my-div">
        Div 2
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDiv1: true,
      showDiv2: false,
    };
  },
  methods: {
    startSwitch() {
      this.showDiv1 = !this.showDiv1; // 切换显示状态
      this.timerId = setTimeout(() => {
        this.$nextTick(() => {
          this.startSwitch(); // 每隔三秒再次切换
        });
      }, 3000);
    },
    // 清理定时器避免内存泄漏
    beforeDestroy() {
      clearTimeout(this.timerId);
    },
  },
  directives: {
    fade: { // 定义过渡动画
      enter: function (el) {
        el.style.opacity = 0;
      },
      leave: function (el) {
        el.style.opacity = 1;
      }
    }
  },
};
</script>

<style scoped>
.my-div {
  opacity: 0;
  transition: opacity 1s ease;
}
.fade-enter-active, .fade-leave-active {
  transition: all 1s;
}
</style>

在这个示例中，我们创建了一个按钮，点击后开始 `startSwitch` 方法。这个方法会先切换 `showDiv1` 和 `showDiv2` 的显示状态，然后设置一个三秒后的定时器，每三秒再次调用自身完成整个切换过程。同时，我们还定义了 CSS 动画样式和Vue的 `fade` 自定义指令来处理切换过程中的淡入淡出效果。