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>

      );

  }

}