Vue实现一种简单的无限循环滚动动画的示例

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vue实现一种简单的无限循环滚动动画的示例脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

本文主要介绍了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="require(`@/assets/imgs/icons/${someVAR}.png`)"
>

当然,如果有不同的意见,欢迎留言交流!

到此这篇关于Vue实现一种简单的无限循环滚动动画的示例的文章就介绍到这了,更多相关Vue 无限滚动动画内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!&nbsp;

脚本宝典总结

以上是脚本宝典为你收集整理的Vue实现一种简单的无限循环滚动动画的示例全部内容,希望文章能够帮你解决Vue实现一种简单的无限循环滚动动画的示例所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:Vue