本篇内容主要讲解“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;
}到此，相信大家对“vue或css怎么实现列表向上无缝滚动动画”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
