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怎么實現列表向上無縫滾動動畫”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！