脚本宝典收集整理的这篇文章主要介绍了列表数据无缝循环播放，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
使用animation属性实现列表数据在容器中循环播放展示：
<div class='container'> <div class='animationContent'> //列表数据 </div> </div>
css代码：
<style>
.container {
max-height: 300px;
overflow: hidden;
}
.animationContent {
animation: ani 10s linear infinITe normal;
}
@keyframes ani {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -50%, 0);
}
}
</style>
按照上面的实现，循环动画可能出现底部空白；
所以，对于列表数据，要增倍展示，比如：
const list = ['1','2','3'];
const showList = [...list,...list];
列表数据showList增加一倍,可以避免动画出现底部空白。
以上是脚本宝典为你收集整理的列表数据无缝循环播放全部内容，希望文章能够帮你解决列表数据无缝循环播放所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。