Vue实现一种简单的无限循环滚动动画的示例
(编辑:jimmy 日期: 2024/12/26 浏览:3 次 )
本文主要介绍了Vue实现一种简单的无限循环滚动动画的示例,分享给大家,具体如下:
先看实现效果:
这种类似轮播的效果,通常可以使用轮播的方案解决,只不过相对于我要分享的方案来说,轮播实现还是要复杂些的。
Vue提供了一种过渡动画transition-group,这里我便是利用的这个效果
// template <transition-group name="list-complete" tag="div"> <div v-for="v in items" :key="v.ix" class="item list-complete-item pro-panel" :style="{ height: sh }" > // 内容部分 </div> </transition-group> //scss .list-complete-item { transition: all 1s; } .list-complete-leave-to { opacity: 0; transform: translateY(-80px); } .list-complete-leave-active { position: absolute; }
这样,动画效果就出来了,但是却不能自动执行,所以我利用了setInterval:
mounted() { let count = 4000 if (!this.timer) { this.timer = setInterval(() => { if (this.items.length > 1) { this.remove() this.$nextTick().then(() => { this.add() }) } }, count) } }, methods: { add: function() { if (this.items && this.items.length) { const item = { ...this.removeitem[0] } item.ix = this.nextNum++ this.items.push(item) } }, remove: function() { this.removeitem = this.items.splice(0, 1) } }
如比,效果得以实现,是不是更简单点。顺带提一下,我这边实现的效果是单条滚动,就像新闻滚动那样,所以视图窗口只能看到一条数据,你也可以不这样限制,那么就能显示整个列表了,不过每次还是只有单条数据的消失效果。
PS:动态渲染图片可以使用这种方式
<img :src="/UploadFiles/2021-04-02/${somevar}.png`)">当然,如果有不同的意见,欢迎留言交流!
下一篇:基于vuex实现购物车功能