【css实现】滚动展示列表信息

实现一个列表滚动展示的css效果

效果类似于这样子

实现代码使用react框架

index.jsx

import React from 'react';
import BasePage from '/components/BasePage';
import Page from '/page';

@Page.renderToDom()
class ScrollShow extends BasePage {
  constructor(props) {
      super(props);

      this.state = {
          data: [
              '小明1同学荣获三号学生',
              '小明2同学荣获三号学生',
              '小明3同学荣获三号学生',
              '小明4同学荣获三号学生',
              '小明5同学荣获三号学生',
              '小明6同学荣获三号学生',
              '小明7同学荣获三号学生',
              '小明8同学荣获三号学生',
              '小明9同学荣获三号学生',
              '小明10同学荣获三号学生',
          ],
          before: 0
      }
  }

  componentDidMount() {
    // 假装拉去数据成功，在回调中执行
    this.scrollShowInfo()
  }

  scrollShowInfo() {
    let { data, before } = this.state
    let after = before == data.length - 1 ? 0 : before + 1
    let _this = this
    this.setState({
      before,
      after,
    }, () => {
      setTimeout(() => {
        _this.setState({tran: true}, () => {
          setTimeout(() => {
            _this.setState({
              before: before < data.length -1 ? ++before : 0,
              tran: false
            }, () => {
              _this.scrollShowInfo()
            })
          }, 1000)
        })
      }, 2000)
    })
  }

  render(){
      let {data, before, after} = this.state
      return(
      <div className="container">
        <div className={['before', this.state.tran && 'before-tran'].join(' ')}>{data[before]}</div>
        <div className={['after', this.state.tran && 'after-tran'].join(' ')}>{data[after]}</div>
      </div>
      );
  }
}

export default ScrollShow;

index.less

.container {
  margin: 300px;
  height: 20px;
  width: 200px;
  border: 1px solid gainsboro;
  position: relative;
  overflow: hidden;
}
.before {
  position: absolute;
  top: 0;
  left: 0;
}
.after {
  position: absolute;
  top: 20px;
  left: 0;
}
.before-tran {
  animation:mymove1 1s;
  animation-fill-mode:forwards;
}

.after-tran {
  animation:mymove2 1s;
  animation-fill-mode:forwards;
}

@keyframes mymove1 {
  from {top:0px;}
  to {top:-20px;}
}
@keyframes mymove2 {
  from {top:20px;}
  to {top:0px;}
}