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