Attempt to fix issue where animation isn't happening upon initial mount

This commit is contained in:
Kevin Qi 2016-05-31 15:51:43 -04:00
parent f42f182936
commit c2eafad82b
2 changed files with 12 additions and 5 deletions

View File

@ -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'"

View File

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