vue或css动画实现列表向上无缝滚动
作者：禾小毅
这篇文章主要为大家详细介绍了vue或css动画实现列表向上无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue或css动画实现列表向上无缝滚动的具体代码，供大家参考，具体内容如下
方法一：vue的实现方法
<div id="publishMain" class="b_list"> <div id="publishMain1"> <div class="b_item" v-for="(ac,acindex) in activityList" :key="acindex"> <!-- 循环的内容 --> </div> </div> <div id="publishMain2"></div> </div>
js
<script>
export default {
data(){
return{
timer: null,
activityList:[]
}
},
mounted() {
this.$nextTick(() => {
this.rollUp();
});
},
beforeDestroy() {
this.timer = null;
clearInterval(this.timer);
},
methods: {
/*向上轮播*/
rollUp() {
let ul1 = document.getElementById("publishMain1");
let ul2 = document.getElementById("publishMain2");
let box = document.getElementById("publishMain");
ul2.innerHTML = ul1.innerHTML;
box.scrollTop = 0;
function rollStart() {
if (box.scrollTop >= ul1.scrollHeight) {
box.scrollTop = 0;
} else {
box.scrollTop++;
}
}
this.timer = setInterval(rollStart, 50);
}
}
}
</script>css
.b_list{
height: 19rem;
overflow: hidden;
}方法二：纯css动画
html
<div class="b_list"> <div class="b_scroll"> <div class="b_item" v-for="(ac,acindex) in activityList" :key="acindex"> <!-- 循环的内容 --> </div> </div> </div>
css
@keyframes scrollTop {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, -300px, 0);
transform: translate3d(0, -300px, 0);
}
}
.b_list{
height: 19rem;
overflow: hidden;
}
.b_scroll{
-webkit-animation: 10s scrollTop linear infinite normal;
animation: 10s scrollTop linear infinite normal;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。