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;
}

谁能指出正确的方向？

标签： javascriptcssvue.jsvue-component

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>