javascript - 如何使用 Vue JS 为向导类型表单制作动画

Question

我正在尝试用 Vue 实现一个简单的动画，但到目前为止还没有成功。我有两个 div，它们根据给定数据属性的值进行渲染

<!--Step 1-->
<div v-if="step == 1" :transition="'slide'">
  <select class="form-control"  v-model="id.category">
    <option value="null">Please Select</option>
    <option v-for="cat in cats" :value="cat.id">@{{cat.name}}</option>
  </select>
</div>

<!--Step 2-->
<div v-if="step==2" :transition="'slide'"  style="background: red">
  <select @change="fixImage(id.subcategory)" class="form-control quoteForm" v-model="id.subcategory">
    <option value="null">Please Select</option>
    <option v-for="subcat in filtered_subcat" :value="subcat.id">@{{subcat.name}}</option>
  </select>
</div>

我实际上有一个“下一步按钮”，它将增加 step 的值，然后显示相关的 div。我想创建类似幻灯片类型的效果，当用户单击“下一步”时，第 1 步向左滑动，第 2 步向内滑动。我的动画 css 如下:

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

有人能指出正确的方向吗？

Answer 1

将变化的内容包裹在 <transition> 中组件:

<transition name="slide-fade">
 <div v-if="step == 1">
     STEP 1 CONTENT
 </div>
</transition>

<transition name="slide-fade">
 <div v-if="step == 2">
     STEP 2 CONTENT
 </div>
</transition>

转换的名称，slide-fade ，与您提供的 CSS 匹配。由于您可能希望滑动内容重叠，因此应该具有 position: absolute 。比如内容滑出:

.slide-fade-leave-active {
  position: absolute;
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

这是一个演示:

new Vue({
  el: "#app",
  data() {
    return {
        step: 1
    }
  }
});

.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  position: absolute;
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <!--Step 1-->

  <transition name="slide-fade">
    <div v-if="step == 1">
      STEP 1 CONTENT
    </div>
  </transition>

  <!--Step 2-->
  <transition name="slide-fade">
    <div  v-if="step == 2">
      STEP 2 CONTENT
    </div>
  </transition>

  <button @click="step++">
    Next >
  </button>
</div>