如何使用Vue JS为向导类型的窗体设置动画

new Vue({
  el: '#app',
  data: {
    // 定义数据
  },
  methods: {
    // 定义方法
  }
});

<div id="app">
  <div v-if="step === 1" class="step1">
    <!-- 第一步内容 -->
  </div>
  <div v-else-if="step === 2" class="step2">
    <!-- 第二步内容 -->
  </div>
  <div v-else-if="step === 3" class="step3">
    <!-- 第三步内容 -->
  </div>
</div>

<transition name="fade">
  <div v-if="step === 1" class="step1">
    <!-- 第一步内容 -->
  </div>
</transition>

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

new Vue({
  el: '#app',
  data: {
    step: 1
  },
  methods: {
    nextStep() {
      this.step++;
    },
    prevStep() {
      this.step--;
    }
  }
});