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;}

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