我目前正在开发一个滑块组件，但我的过渡模式似乎不起作用。我用过：
<transition name="fade" mode="out-in">
据我了解，这应该强制元素在渲染之前先完成它的整个动画。
这是我的滑块组件的示例：
https://www.webpackbin.com/bins/-KfMMcLvpUA6LGOFL3vM
我可以通过绝对叠加图像来解决这个问题，但如果有更简洁的解决方案，这显然不是我想做的事情。
过渡 CSS 包含在索引页的标题中：
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
如果有人可以看一下，那将是很棒的。
【问题讨论】：
标签： vue.js vuejs2 vue-component
您认为一个转换将在另一个转换开始之前完成的理解是错误的。如果您要更改单个 transition 标记中的元素，这可能是正确的，但当每个元素都包含在其自己的 transition 标记中时，情况就不是这样了。
您可以做的最简单的事情是使用setTimeout 使下一个activeSlide 的分配等待转换。
methods: {
prevSlide() {
const nextSlide = this.activeSlide === this.firstSlide ? this.lastSlide : this.activeSlide - 1;
this.activeSlide = null;
setTimeout(() => {
this.activeSlide = nextSlide;
}, 500);
},
nextSlide() {
const nextSlide = this.activeSlide === this.lastSlide ? this.firstSlide : this.activeSlide + 1;
this.activeSlide = null;
setTimeout(() => {
this.activeSlide = nextSlide;
}, 500);
}
}
这要求您的超时值和 CSS 过渡长度保持同步。
更多的工作是使用transition hooks 在离开过渡开始和结束时发出事件。
<transition name="fade" mode="out-in" @leave="transitionStarted" @after-leave="transitionComplete">
您可以在顶级代码中捕获它们（而不是在滑块中，因为插槽事件不会传播到插槽容器）
<slide src="http://lorempixel.com/196/196" alt="" @transition-started="holdUp" @transition-complete="okGo"></slide>
在处理程序（holdUp 和 okGo）中，您将设置一个布尔数据项，将其作为道具传递给 slider。在slider、nextSlide 和prevSlide 中将计算activeSlide 的下一个值，但不会设置它。当 prop 指示转换完成时，它会被设置。
【讨论】：