Javascript Vue.js转换-输入和离开，取决于递增/递减值

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

转换由

this.step

值（

v-bind:key=“step”

）控制

当

执行此步骤时，转换看起来很棒。步骤+

，转换以“正确”的方向滑动：从左向右滑动。但是，当

此.step--

时，转换是相同的

---

我想知道，我该如何纠正这一点，以便从右向左滑动此步骤--方向？

转换需要两种不同的CSS输入状态，因为您希望从两个方向滑入。使用

输入类

的绑定（与

输入活动类

不同），您可以将幻灯片定位分离为两个单独的CSS输入类，并根据

步骤

中的更改进行交换。例如，以下是新绑定：

:enter-class="enterClass"

enterClass

是一个数据属性，使用

步骤上的
监视
设置为递增或递减类名字符串：

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

演示
综上所述，下面是代码的简化版本：


newvue({
el:“应用程序”，
数据（）{
返回{
步骤：1，
enterClass:'
}
},
观察：{
步骤（值，旧）{
this.enterClass=value>old？'slide in left'：'slide in right'；
}
}
});
[v-clope]{
显示：无；
}
#应用程序{
背景：#fff；
边界半径：4px；
}
.滑块{
位置：相对位置；
溢出x：隐藏；
边框：1px实心#中交；
边界半径：3px；
高度：40px；
利润底部：4倍；
}
.slider>div{
位置：绝对位置；
宽度：100%；
文本对齐：居中；
}
.动画{
转变：转变；
}
.向左滑{
转换：转换（-100%，0）；
}
.向右滑{
转换：转换（100%，0）；
}

内容

{{step}}
-
+
您可以使用GSAP。我在视频中看到了（与计时链接）
这里有一个代码示例（您可以轻松地在步骤中使用它）和结果。
Hi@Dan是的，它确实有效。谢谢，很抱歉没有尽快更新。