如何解决vuejs中图片之间的过渡
我想在带有图例的 2 个图像之间创建平滑过渡。图像来自图像的对象数组。
因为仅适用于单个标签和组件,我创建了一个组件来定义图像+图例。
<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",但没有任何效果如我所愿。
我忽略了什么?
解决方法
在 v-enter 和 v-leave 中发现位置必须设置。
代码现在是:
.v-leave,.v-enter-to {
position: relative;
opacity: 1;
}
.v-enter,.v-leave-to {
position: absolute;
opacity: 0;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。