mirror of
https://github.com/kevinsqi/react-circular-progressbar.git
synced 2026-01-25 16:03:15 +00:00
Attempt to fix issue where animation isn't happening upon initial mount
This commit is contained in:
parent
f42f182936
commit
c2eafad82b
@ -12,7 +12,7 @@ const Config = ({ name, example, description, children }) => (
|
||||
<p><code>{name}</code><small className="text-muted m-l-1">{example ? `e.g. ${example}` : null}</small></p>
|
||||
<p>{description}</p>
|
||||
<div className="row">
|
||||
<div className="col-xs-6 offset-xs-3">
|
||||
<div className="col-xs-4 offset-xs-4">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
@ -124,7 +124,12 @@ class Demo extends React.Component {
|
||||
name="initialAnimation"
|
||||
example="false"
|
||||
description="Toggle whether to animate progress starting from 0% on initial mount."
|
||||
/>
|
||||
>
|
||||
<CircularProgressbar
|
||||
percentage={50}
|
||||
initialAnimation={true}
|
||||
/>
|
||||
</Config>
|
||||
<Config
|
||||
name="classForPercentage"
|
||||
example="(pct) => pct < 100 ? 'incomplete' : 'complete'"
|
||||
|
||||
@ -12,10 +12,12 @@ class CircularProgressbar extends React.Component {
|
||||
componentDidMount() {
|
||||
if (this.props.initialAnimation) {
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
percentage: this.props.percentage,
|
||||
window.requestAnimationFrame(() => {
|
||||
this.setState({
|
||||
percentage: this.props.percentage,
|
||||
});
|
||||
});
|
||||
}, 10);
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user