css动画多条数据向上滚,React 列表向上、向下循环滚动

实现的效果:

效果图.gif

实现步骤

开始滚动：setInterval() 定时调用滚动方法

停止滚动：clearInterval() 取消定时器

向上滚动方法：

1、数组第一条添加到数组末尾 - push()

2、列表向上滚动添加css3过渡动画

3、计算向上滚动距离(第一条数据高度，如果高度固定用固定值即可)

4、删除数组第一条数据 - shift()

5、向上滚动距离清零

6、取消过渡动画停止滚动

向下滚动方法：

1、列表向下滚动添加css3过渡动画

2、计算向下滚动距离(最后一条数据高度，如果高度固定用固定值即可)

3、数组最后一条数据添加到数组头部 - unshift()

4、第一条数据添加渐显动画

5、删除数组最后一条数据 - pop()

6、向上滚动距离清零

7、取消过渡动画停止滚动

注：Demo 用的ant design 组件，自己写思路也是一样的

部分代码

js:

const { Button,List, Avatar } = antd;

let scrollInterval='';

class App extends React.Component {

state = {

data:[

{

title: 'Ant Design Title 1',

description:"Ant Design,