vuejs中图片之间的转换

Question

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

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

<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"，但没有什么能如我所愿。

我在看什么？

Answer 1

发现必须设置 v-enter 和 v-leave 中的 position。

代码现在是：

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

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