react实现列表循环滚动播放

一、animtion 动画

import React, { Component } from 'react'

import { List } from 'antd';

import { connect } from 'react-redux';

import './style.scss';

 

class TodoList extends Component {

scrollTimeout = null;

constructor(props) {

super(props);

this.state = {

sectionDomHeight: 0, // 列表容器的高度

list: [

'第一条数据',

'第二条数据',

'第三条数据',

'第四条数据',

'第五条数据',

'第六条数据',

'第七条数据',

'第八条数据',

'第九条数据',

'第十条数据',

],

hoverState: false // 鼠标移入状态

};

this.mouseEnter = this.mouseEnter.bind(this);

this.mouseLeave = this.mouseLeave.bind(this);

}

render(){

const { list } = this.state;

return (

<div

className={this.state.sectionDomHeight > 200 ? 'scroll' : ''}

style={{marginLeft: '10px', marginTop: '20px'}}

onMouseEnter={this.mouseEnter}

onMouseLeave={this.mouseLeave}

>

<div className={`scroll-list ${this.state.hoverState ? 'hover' : ''}`}

style={{ animationDuration: `${list.length / 1}s`}}

ref={this.handleSection}>

<List

id = "scrollList"

bordered

dataSource={list}

renderItem={(item,index) => (

<List.Item>

{item}

</List.Item>

)}

/>

</div>

{

list.length > 2 &&

<div

className={`scroll-list ${this.state.hoverState ? 'hover' : ''}`}

style={{ animationDuration: `${list.length / 1}s`}}

ref={this.handleSection}>

<List

bordered

dataSource={list}

renderItem={(item,index) => (

<List.Item>

{item}

</List.Item>

)}

/>

</div>

}

</div>

)

}

 

componentDidMount() {

this.computeHeight();

}

 

componentWillUnmount() {

clearTimeout(this.scrollTimeout);

}

 

computeHeight = () => {

this.scrollTimeout = setTimeout(()=>{

let sectionDomHeight = this.sectionDom && this.sectionDom.offsetHeight || 0;

this.setState({

sectionDomHeight

})

},0)

}

 

handleSection = n => {

this.sectionDom = n;

}

 

// 鼠标移入

mouseEnter() {

this.setState({

hoverState: true

})

}

 

//鼠标移出

mouseLeave() {

this.setState({

hoverState: false

})

}

}

export default connect(null, null)(TodoList);

style.scss

.scroll {

width: 300px;

height: 200px;

overflow: hidden;

.scroll-list {

animation: moveup 7s linear infinite normal;

// 动画名称 执行时间 动画方式: 匀速 动画次数：无限次infinite 动画方向

&.hover {

animation-play-state: paused;

}

}

}

 

@keyframes moveup {

0% {

transform: translateY(0);

}

100% {

transform: translateY(-100%);

}

}

 

二、改变 scroll-list的 margin-top ，类似于翻页效果

1.将数组第一项加在 数组后边

2.margintop往上移动一个 li的高度

3.这个移动结束后(transtiontime:1s),1000毫秒后，margintop改成0 

4.每屏展示元素个数 * 1000后循环一次 1 ， 2，3

import React, {Component} from 'react';

import { List } from 'antd';

import './style2.scss';

 

class TodoList2 extends Component {

scrollInterval = null;

scrollTimeout = null;

constructor(props) {

super(props);

this.state = {

list: [

'第一条数据',

'第二条数据',

'第三条数据',

'第四条数据',

'第五条数据',

'第六条数据',

'第七条数据',

],

animate: false,

listMarginTop: 0

}

}

render() {

const { list, animate, listMarginTop } = this.state;

return (

<div className={["todo-list-wrap", list.length > 4 ? 'scroll' : ''].join(' ')}>

<div

className={`scroll-list ${animate ? 'animate' : ''}`}

style={{marginTop: listMarginTop}}

>

<List

id = "scrollList"

bordered

dataSource={list}

renderItem={(item,index) => (

<List.Item>

{item}

</List.Item>

)}

/>

</div>

</div>

)

}

 

componentDidMount() {

this.scrollUp();

this.scrollInterval = setInterval(()=>{

this.scrollUp();

}, 4000) // 4 * 1000 4代表一屏放置几个元素

}

 

componentWillUnmount() {

clearInterval(this.scrollInterval);

clearTimeout(this.scrollTimeout);

}

 

scrollUp() {

this.state.list.push(this.state.list[0]);

let height=document.getElementById("scrollList").getElementsByTagName("li")[0].scrollHeight + 1;

this.setState({

animate: true,

listMarginTop: "-" + height + "px"

})

 

this.scrollTimeout = setTimeout(()=>{

this.state.list.shift();

this.setState({

animate: false,

listMarginTop: "0",

})

},1000)

}

 

}

 

export default TodoList2;

 

style2.scss

.todo-list-wrap {

width: 300px;

height: 200px;

overflow: hidden;

&.scroll {

.scroll-list{

&.animate{

transition: all 1s;

}

}

}

}