本文实例为大家分享了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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。