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

Posted 2023-02-23

【中文标题】如何使用 Vue JS 为向导类型的表单设置动画

【英文标题】：How to animate a wizard type form with Vue JS

【发布时间】：2021-03-08 16:41:11

【问题描述】：

我正在尝试用 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;

谁能指出正确的方向？

【参考方案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>

【讨论】：

如果我是正确的，您甚至可以将两个 div 放在同一个 transition 元素中。