利用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怎么编写一个无限循环的滚动动画-创新互联
当前URL：
http://bzwzjz.com/article/cesejj.html
