Vue.js 在播放 Enter 后动态更改离开过渡

Question

>我有一个动态过渡，告诉我的元素向左或向右移动(它是一个滑块元素(。由于默认情况下 Vue 只允许我执行一个转换，所以我使用的是动态转换属性：

<transition v-bind:name="'slider-' + slideDirection">

现在，此滑块具有进入和离开过渡，可根据其显示或离开的方向进行调整。一切似乎都很好，但是..

当元素填充显示条件时，输入和输入转换将始终正确执行。但是，如果在元素出现后更改了离开和离开过渡，则不会获得更新的方向。

这是一个小提琴，显示了我的意思：

https://jsfiddle.net/nxLmdk9q/4/

在此示例中，一切正常，除了一旦您更改方向，元素就会获得 leave-to 的上一个方向动画。

我该如何解决这个问题？

Answer 1

看起来幻灯片切换在幻灯片方向更新之前就开始了。 尝试使用 nextTick 函数，以便幻灯片切换等待方向更新。

更新的示例。

new Vue({
el: "#app",
data: {
slideDirection: "right",
counter: 0
},
methods: {
moveRight: function() {
this.slideDirection = "right";
this.$nextTick(() => {
this.counter++;
})
},
moveLeft: function() {
this.slideDirection = "left";
this.$nextTick(() => {
this.counter--;
})
},
}
})

body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
display: flex;
flex-direction: column;
width: 300px;
height: 150px;
}
div#slider {
position: relative;
}
div#slider div:nth-child(even) {
background: green;
}
div#slider div:nth-child(odd) {
background: red;
}
div {
padding: 30px;
width: 100%;
height: 100%;
position: absolute;
}
div:odd {
background: blue;
}
.slider-right-enter {
opacity: 0;
transform: translatex(100%);
}
.slider-right-enter-to {
opacity: 1;
transition: all 0.5s ease-out;
}
.slider-right-leave-to {
opacity: 0;
transform: translatex(-100%);
transition: all 0.5s ease-out;
}
.slider-left-enter {
opacity: 0;
transform: translatex(-100%);
}
.slider-left-enter-to {
opacity: 1;
transition: all 0.5s ease-out;
}
.slider-left-leave-to {
opacity: 0;
transform: translatex(100%);
transition: all 0.5s ease-out;
}

<div id="app">
<div id="slider">
<transition v-bind:name="'slider-' + slideDirection">
<div v-if='counter == 0'>
0
</div>
</transition>
<transition v-bind:name="'slider-' + slideDirection">
<div v-if='counter == 1'>
1
</div>
</transition>
<transition v-bind:name="'slider-' + slideDirection">
<div v-if='counter == 2'>
2
</div>
</transition>
<transition v-bind:name="'slider-' + slideDirection">
<div v-if='counter == 3'>
3
</div>
</transition>
</div>
<div>
<button @click="moveLeft">
&#x3C;&#x3C;
</button>
<button @click="moveRight"> 
&#x3E;&#x3E;
</button>
</div>
</div>