列表数据无缝循环播放

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

 

欢迎交流意见哟！！！