我正在使用打开动画的React Bootstrap ProgresBar组件。在当前行为中，动画在增加和减少进度时都起作用。我有一个用例，我将进度从 0 缓慢增加到 100，然后将进度重置回 0 并再次缓慢增加。当从 100 重置为 0 时，进度会向后移动，这让我的用户感到非常困惑。
理想的行为是：（逐渐）从 0 增加到 100 时进行动画处理，但在从 100 重置为 0 时不进行动画处理。
任何人都知道如何实现这一目标？
React Bootstrap - 如何在值增加但重置为 0% 时不为 ProgressBar 设置动画？
IT技术
javascript
reactjs
progress-bar
react-bootstrap
2021-04-26 11:09:46
1个回答
这是本期发布的解决方案：
只需将其添加到组件 CSS 中：
.progress-bar[aria-valuenow="0"] {
transition: none;
}
当now值更改为 0 时，过渡设置为无，条形立即消失。虽然只适用于零，如果你从 80 到 30，你仍然会看到过渡。