React Bootstrap -如何在值增加而不是重置为0%时设置ProgressBar动画？

import { ProgressBar } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

constructor(props) {
  super(props);
  this.state = {
    value: 0,
    animationClass: ''
  };
}

render() {
  return (
    <ProgressBar
      now={this.state.value}
      className={this.state.animationClass}
    />
  );
}

componentDidUpdate(prevProps, prevState) {
  if (this.state.value > prevState.value) {
    this.setState({ animationClass: 'progress-bar-animated' });
  } else {
    this.setState({ animationClass: '' });
  }
}

.progress-bar-animated {
  animation: progress-animation 2s linear;
}

@keyframes progress-animation {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}