react-countup

import CountUp,{startAnimation} from 'react-countup'

import './countup.css'

class Index extends Component {
  state = { 
    end:100
   }
  onComplete=()=>{
    console.log('动画完成后')
  }
  onStart=()=>{
    console.log('动画完成前')
  }
  start=()=>{
    console.log(this.countup)
    this.countup.restart()
  }
  render() { 
    return ( 
      <div style={{textAlign:'center'}}>
        <CountUp className="custom-count" start={0} end={2000} />
        <br/>
        <CountUp 
          ref={el=>this.countup=el}
          className="custom-count"
          start={0}
          end={this.state.end}
          duration={2}
          redraw={true}  //如果为true，则组件将始终在每次重新渲染时进行动画处理。
          separator=""  //制定千分位的分隔符
          decimal=","  //制定小数字符
          prefix="EUR "  //动画值前缀 
          suffix=" left"  //动画值后缀，可以加单位
          onComplete={this.onComplete} //动画完成后调用的函数
          onStart={this.onStart} //在动画开始前调用的函数
        />
        <br/>
        <button onClick={this.start}>修改end</button>
      </div>
     );
  }
}

class Index extends Component {

  state = { 

    end:100

   }

  onComplete=()=>{

    console.log('动画完成后')

  }

  onStart=()=>{

    console.log('动画完成前')

  }

  start=()=>{

    console.log(this.countup)

    this.countup.restart()

  }

  render() { 

    return ( 

      <div style={{textAlign:'center'}}>

        <CountUp className="custom-count" start={0} end={2000} />

        <br/>

        <CountUp 

          ref={el=>this.countup=el}

          className="custom-count"

          start={0}

          end={this.state.end}

          duration={2}

          redraw={true}  //如果为true，则组件将始终在每次重新渲染时进行动画处理。

          separator=""  //制定千分位的分隔符

          decimal=","  //制定小数字符

          prefix="EUR "  //动画值前缀 

          suffix=" left"  //动画值后缀，可以加单位

          onComplete={this.onComplete} //动画完成后调用的函数

          onStart={this.onStart} //在动画开始前调用的函数

        />

        <br/>

        <button onClick={this.start}>修改end</button>

      </div>

     );

  }

}