React Bootstrap - how to animate ProgressBar when value is increasing but not when resetting to 0%?

问题

I'm using the React Bootstrap ProgresBar component with animation turned on. In the current behavior, animation works both when increasing and decreasing the progress. I have a use-case where I slowly increase the progress from 0 to 100, and then I reset the progress back to 0 and increase it slowly again. When resetting from 100 to 0 the progress animates backwards which is very confusing for my users.

The desirable behavior is: animate when (gradually) increasing from 0 to 100, but don't animate when resetting from 100 to 0.

Anyone knows how to achieve that?

回答1:

Here is the solution as posted in this issue:

Just add this to the component CSS:

.progress-bar[aria-valuenow="0"] {
    transition: none;
}

When the now value changes to 0 the transition is set to none and the bar immediately disappears. Only works with zero though, if you go from 80 to 30 you still see the transition.

来源：https://stackoverflow.com/questions/60134518/react-bootstrap-how-to-animate-progressbar-when-value-is-increasing-but-not-wh