代码之家 › 专栏 › 技术社区 › seladb

React Bootstrap-如何在ProgressBar值增加时设置动画,但在重置为0%时不设置动画?

react-bootstrap progress-bar reactjs javascript

seladb · 技术社区 · 4 年前

我在用 React Bootstrap ProgresBar 启用动画的组件。在当前行为中,动画在增加和减少进度时都有效。我有一个用例,我将进度从0缓慢增加到100,然后将进度重置为0并再次缓慢增加。当从100重置为0时,进度会向后动画化,这对我的用户来说非常困惑。

理想的行为是:从0(逐渐)增加到100时设置动画,但从100重置到0时不设置动画。

有人知道如何做到这一点吗?

0 回复 | 直到 4 年前

seladb 4 年前

这是本文中发布的解决方案 issue :

只需将此添加到组件CSS中:

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

当 now 值变为0,转换设置为无,条形图立即消失。不过,只有在零的情况下才有效,如果你从80岁到30岁,你仍然会看到过渡。

推荐文章

Bing Lan · 为什么我的react bootstrap列表组显示不同?

6 年前

boking · 使用onSubmit而不是onClick时,react await不等待

6 年前

ananai · ReactJS引导导航栏不在一行中

6 年前

Prajwal · react引导面包屑与react路由器dom

6 年前

Mike · 反应:为什么我包装JSX的DIV突然变得很窄,不允许我的布局扩展?

6 年前

Emixam23 · React路由器引导和导航栏重定向

7 年前

p_mcp · React引导选项卡上禁用的键盘事件

7 年前

amar ghodke · React 16 Hidden button Modal(隐藏按钮模式)在单击时无法打开

7 年前

NIrav Modi · React引导表是否提供带有清除按钮的标题TextFilter?

7 年前

Diego Unanue · 带有引导列的映射

7 年前