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 >

      ) ;

  }

}

查看更多关于react-countup - 数字滚动效果的详细内容...