Vue.js 转换 - 进入和离开，取决于递增/递减值答案

【问题标题】：Vue.js Transitions - enter and leave, dependent on increment/decrementing valueVue.js 转换 - 进入和离开，取决于递增/递减值
【发布时间】：2020-01-06 11:05:06
【问题描述】：

我目前有以下过渡块组件：

<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-- 方向上从右向左滑动？

【问题讨论】：

嗨@Dan 是的，它确实有效，谢谢，抱歉没有尽快更新。

标签： javascript css vue.js vuejs2 vue-transitions

【解决方案1】：

您需要两个不同的 CSS 进入状态来进行转换，因为您想从两个方向滑入。使用enter-class 的绑定（与enter-active-class 不同），您可以将幻灯片定位隔离为2 个单独的CSS 输入类，并根据step 中的更改交换它们。例如，这是新的绑定：

:enter-class="enterClass"

enterClass 是一个数据属性，使用watch 在step 上设置为递增或递减类名称字符串：

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更漂亮，你可以用同样的方式添加leave-class

【讨论】：

【解决方案2】：

您可以使用 GSAP。我在视频中看到了（有时间链接）https://youtu.be/14yOawLavB0?t=734 有代码示例（您可以通过步骤轻松使用它）和结果。

【讨论】：