Блог

Я пытаюсь реализовать простую анимацию с помощью Vue, но пока безуспешно. У меня есть два divs, которые отображаются в зависимости от значения данного свойства данных

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

Кто-нибудь может указать правильное направление?

Оберните изменяющееся содержимое в <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>