vue或css怎么实现列表向上无缝滚动动画

vue或css怎么实现列表向上无缝滚动动画

本篇内容主要讲解“vue或css怎么实现列表向上无缝滚动动画”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue或css怎么实现列表向上无缝滚动动画”吧!

效果如下：

方法一：vue的实现方法

<divid="publishMain"class="b_list"><divid="publishMain1"><divclass="b_item"v-for="(ac,acindex)inactivityList":key="acindex"><!--循环的内容--></div></div><divid="publishMain2"></div></div>

js

<script>exportdefault{data(){return{timer:null,activityList:[]}},mounted(){this.$nextTick(()=>{this.rollUp();});},beforeDestroy(){this.timer=null;clearInterval(this.timer);},methods:{/*向上轮播*/rollUp(){letul1=document.getElementById("publishMain1");letul2=document.getElementById("publishMain2");letbox=document.getElementById("publishMain");ul2.innerHTML=ul1.innerHTML;box.scrollTop=0;functionrollStart(){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

<divclass="b_list"><divclass="b_scroll"><divclass="b_item"v-for="(ac,acindex)inactivityList":key="acindex"><!--循环的内容--></div></div></div>

css

@keyframesscrollTop{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:10sscrollToplinearinfinitenormal;animation:10sscrollToplinearinfinitenormal;}

到此，相信大家对“vue或css怎么实现列表向上无缝滚动动画”有了更深的了解，不妨来实际操作一番吧！这里是恰卡编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！