Vue.js Transitions - 進入和離開，取決於遞增/遞減值

Question

我目前有以下轉換塊組件：

<div
   v-if="!surveyResultIsReady"
   class="vh-md-40 position-relative"
   >
   <transition
      name="custom-classes-transition"
      enter-active-class="animated slideInRight"
      leave-active-class="animated slideOutLeft"
      >
      <div
         v-bind:key="step"
         class="w-100 position-absolute mx-auto"
         >
         <SurveyActiveQuestion
            v-if="!surveyResultIsReady"
            v-bind:question="activeQuestion()"
            v-bind:totalQuestions="totalQuestions"
            v-on:activeQuestionAnswered="activeQuestionAnswered()"
            />
      </div>
   </transition>
</div>

轉換由this.step值（ v-bind:key="step" ）控制。

當this.step++ ，過渡看起來很棒，過渡在“正確”方向滑動：從左向右滑動。 但是，當this.step--過渡是相同的。

我想知道，我將如何更正此問題以從右向左向后滑動this.step--方向？

Answer 1

您需要兩種不同的 CSS 輸入狀態來進行轉換，因為您希望從兩個方向滑入。 使用enter-class的綁定（與enter-active-class ），您可以將幻燈片定位隔離為 2 個單獨的 CSS enter 類，並根據step的更改交換它們。 例如，這是新的綁定：

:enter-class="enterClass"

enterClass是一個數據屬性，使用step上的watch設置為遞增或遞減的類名字符串：

watch: {
  step(old, value) {
    this.enterClass = value > old ? 'slide-in-right' : 'slide-in-left'; 
  }
}

這是課程：

.animated {
  transition: transform .5s;
}
.slide-in-left {
  transform: translate(-100%, 0);
}
.slide-in-right {
  transform: translate(100%, 0);
}

演示總而言之，這是您的代碼的簡化版本：

 new Vue({ el: "#app", data() { return { step: 1, enterClass: '' } }, watch: { step(value, old) { this.enterClass = value > old ? 'slide-in-left' : 'slide-in-right'; } } });

 [v-cloak] { display:none; } #app { background: #fff; border-radius: 4px; } .slider { position: relative; overflow-x: hidden; border: 1px solid #cccccc; border-radius: 3px; height: 40px; margin-bottom: 4px; } .slider > div { position: absolute; width: 100%; text-align: center; } .animated { transition: transform .5s; } .slide-in-left { transform: translate(-100%, 0); } .slide-in-right { transform: translate(100%, 0); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app" v-cloak> <div class="slider"> <transition name="slide" enter-active-class="animated" :enter-class="enterClass" > <div :key="step"> Content <br /> {{ step }} </div> </transition> </div> <button @click="--step">-</button> <button @click="++step">+</button> </div>

如果你想讓它更漂亮，你可以用同樣的方式添加leave-class

Answer 2

您可以使用 GSAP。 我在視頻中看到了它（時間鏈接） https://youtu.be/14yOawLavB0?t=734有代碼示例（您可以通過步驟輕松使用它）和結果。