1

我想在两个带有图例的图像之间创建一个平滑的过渡。图像来自图像对象数组。

因为仅适用于单个标签和组件，所以我创建了一个组件来定义图像+图例。

    <transition>
        <home-image :slide="slide" :key="slide"></home-image>
    </transition>

我定义的类是这样的

.v-enter-active,
.v-leave-active {
    transition: opacity 2s ease-in-out;
}

.v-leave,
.v-enter-to {
    opacity: 1;
}

.v-enter,
.v-leave-to {
    opacity: 0;
}

新图像由方法返回

    updateSlide() {
        this.slide = this.entries[ Math.floor( Math.random() * this.entries.length ) ];
    }

其中条目是我在数据中定义的数组

this.slide 定期更新，像这样每 10 秒更新一次，这在 created() 部分中定义

    this.updateSlide();
    this.uSlide = setInterval( this.updateSlide, 10000);

该代码有效，因为每 10 秒在 this.slide 中加载一个新图像。但是，转换仅“半途而废”。

没有过渡淡出：“旧图像”消失并为新图像淡入让路。

但是，我想要的是从一个到另一个的平稳过渡。

我已经尝试了不止几个想法，包括使用 mode="out-in" 和 "in-out"，但没有什么能如我所愿。

我在看什么？

4

0 回答 0