列表数据无缝循环播放

使用animation属性实现列表数据在容器中循环播放展示：

?

1 2 3 4 5

<div class='container'>   <div class='animationContent'>     //列表数据   </div> </div>

css代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<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增加一倍,可以避免动画出现底部空白。

 

欢迎交流意见哟！！！