vue文字从下往上无缝滚动效果
需求:对中奖用户进行滚动效果展示
这种效果需求还是蛮多的,想起之前用JQuery
实现的一个无缝滚动( 缅怀过去),是通过jq的animate
方法实现的,动画结束之后就将第一个元素appendTo
追加到最后面,实现循环滚动特效,不得不感叹技术更新换代真的很快。
回到现在Vue的项目,本来想用插件,但是觉得这么一个小动画用插件有点太重了,还是自己写一个比较好。
实现原理
实现原理也比较简单
- 对整个列表实现上移动画
- 将列表的第一个数据移动到最后一个
因为vue是基于数据驱动的,所以,对我们开发者来说,直接操控数组,删除第一个数组数据,然后追加到数组后面就好了。
template 部分
<!-- 无缝滚动效果 --> <div class="marquee-wrap">
<ul class="marquee-list" :class="{'animate-up': animateUp}">
<li v-for="(item, index) in listData" :key="index">{{item}}</li>
</ul>
</div>
script部分
export default { name: "marquee-up",
data() {
return {
animateUp: false,
listData: ['12***ve 成功邀请12人 已获奖金60元', 'l***e 成功邀请5人 已获奖金40元', 'l***e 成功邀请1人 已获奖金5元'],
timer: null
}
},
mounted() {
this.timer = setInterval(this.scrollAnimate, 1500);
},
methods: {
scrollAnimate() {
this.animateUp = true
setTimeout(() => {
this.listData.push(this.listData[0])
this.listData.shift()
this.animateUp = false
}, 500)
}
},
destroyed() {
clearInterval(this.timer)
}
};
style 部分
.marquee-wrap { width: 80%;
height: 40px;
border-radius: 20px;
background: rgba($color: #000000, $alpha: 0.6);
margin: 0 auto;
overflow: hidden;
.marquee-list {
li {
width: 100%;
height: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 0 20px;
list-style: none;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 18px;
font-weight: 400;
}
}
.animate-up {
transition: all 0.5s ease-in-out;
transform: translateY(-40px);
}
}
以上是 vue文字从下往上无缝滚动效果 的全部内容, 来源链接: utcz.com/a/13093.html