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>
     );
  }
}