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>

      );

  }

}