React Bootstrap - 如何在值增加但重置为 0% 时不为 ProgressBar 设置动画? [英] React Bootstrap - how to animate ProgressBar when value is increasing but not when resetting to 0%?

问题描述

我正在使用 React Bootstrap ProgresBar 组件并打开动画.在当前行为中，动画在增加和减少进度时都起作用.我有一个用例，我将进度从 0 缓慢增加到 100，然后将进度重置回 0 并再次缓慢增加.当从 100 重置为 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.

理想的行为是:(逐渐)从 0 增加到 100 时进行动画处理，但从 100 重置为 0 时不进行动画处理.

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

有人知道如何实现吗?

推荐答案

这是发布在此 问题:

只需将其添加到组件 CSS 中即可:

Just add this to the component CSS:

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

当 now 值更改为 0 时，过渡设置为无，条形立即消失.不过只适用于零，如果你从 80 到 30，你仍然会看到过渡.

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.

这篇关于React Bootstrap - 如何在值增加但重置为 0% 时不为 ProgressBar 设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！