react-countup - 数字滚动效果,可以重置

最新推荐文章于 2024-05-12 09:59:01 发布

呼哈吧扎嘿

最新推荐文章于 2024-05-12 09:59:01 发布

阅读量2k

点赞数

分类专栏： react

原文链接：http://www.manongjc.com/detail/19-afuwobpcbkhttuz.html

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客探讨了React中一个名为`CountUp`的动画组件的使用，包括如何设置动画的开始和结束值、动画时长、重绘选项以及千分位分隔符等属性。此外，还展示了如何在动画开始和完成时触发自定义函数，并通过按钮动态修改动画的结束值。这是一个关于React组件交互和动画控制的实例。

摘要由CSDN通过智能技术生成


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>

     );

  }

}