Vue.js 过渡模式不起作用？

Question

我目前正在开发一个滑块组件，但我的过渡模式似乎不起作用。我用过：

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

我把它放在尽可能容易使用的地方，如果有人能看一下那就太棒了。

Answer 1

您认为一个转换将在另一个转换开始之前完成的理解是错误的。如果您要更改单个 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 指示转换完成时，它将被设置。

Vue.js 过渡模式不起作用？

Vue.js transition mode not working?

vue.js

vue-component

vuejs2