利用Vue怎么编写一个无限循环的滚动动画-创新互联

利用Vue怎么编写一个无限循环的滚动动画？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

成都创新互联公司服务项目包括印江网站建设、印江网站制作、印江网页制作以及印江网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，印江网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到印江省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

Vue提供了一种过渡动画transition-group，这里我便是利用的这个效果

// template

 

  // 内容部分 
 


//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：动态渲染图片可以使用这种方式

关于利用Vue怎么编写一个无限循环的滚动动画问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。

标题名称：利用Vue怎么编写一个无限循环的滚动动画-创新互联
标题路径：http://cdjierui.cn/article/cesejj.html