简述:在Vue中实现一个大屏上的标签自动向上滚动的无缝动画,通常涉及到对列表元素的动态管理以及CSS动画或过渡效果的使用。这里来记录一下
Vue.js ~ 第 10 篇 —— Vue大屏中标签自动向上滚动动画,无缝滚动
一. 原生VueJS实现
1. 首先定义标签,绑定属性
//动画标签
<div
id="scro_box"
ref="scrolls"
:class="{ animations: animate == true }"
@mouseenter="mEnter"
@mouseleave="mLeave"
>
<div
class="scroll_item"
v-for="(item, index) in abnormity"
:key="index"
>
{{ item}}
</div>
</div>
//相关css
.animations{
transition: all 0.5s linear;
}
2. 定义相关属性
data() {
return {
animate: false,//默认false
abnormity: [], //异常列表数据
};
},
3. 函数设置动画
//动画时间
mounted: function () {
this.timer1 = setInterval(this.scrollTop, 1400);
}
// 标签向上滚动
scrollTop() {
var scrolls = this.$refs.scrolls;
scrolls.style.marginTop = "-40px";
this.animate = !this.animate;
// 在异步函数中会出现this的偏移问题,此处一定要先保存好this的指向
var that = this;
setTimeout(function () {
that.abnormity.push(that.abnormity[0]);
that.abnormity.shift();
scrolls.style.marginTop = "0px";
// 这个地方如果不把animate 取反会出现消息回滚的现象,
that.animate = !that.animate;
}, 500);
},
//鼠标进入清除
mEnter() {
clearInterval(this.timer1);
},
//鼠标离开开启
mLeave() {
this.timer1 = setInterval(this.scrollTop, 1000);
},
二. 这里给大家推荐一款vue插件,也是无缝滚动,跟本文章实现效果相似
无缝滚动https://blog.csdn.net/weixin_65793170/article/details/129388795?spm=1001.2014.3001.5501