如何根据变化的变量为宽度设置动画

Question

我目前正在尝试开发一个进度条，该进度条会根据非空输入的数量而增长或缩小。

我已经尝试了 2 种解决方案来根据 var percentage.

对条形图进行动画处理

第一个：

我试过在 App.js 中像这样内联编写过渡样式：

  <div className="progress-div" >
      <div style={{transition:"all 500ms",  width: `${progress}%`}} className="progress"/>
  </div>

并在 App.css 中：

 .progress-div {
    background-color:#E2E2F6;
    border-radius: .5rem;
  }
  
  .progress {
    background-color: #8B8CC7;
    height: 15px;
  }

第二个：

  <div className="progress-div" >
      <div style={{width: `${progress}%`}} className="progress"/>
  </div>

.progress-div {
    background-color:#E2E2F6;
    border-radius: .5rem;
  }
  
  .progress {
    background-color: #8B8CC7;
    height: 15px;
    transition: all 500ms
  }

这些都不起作用，我想不会，因为我在内联代码中给出了宽度，但我不知道如何将变量传递给 css 文件或另一种让它工作的方法。

Answer 1

我已经尝试过你们的两种解决方案，都适用于我的沙箱 HERE

我唯一想到的是“进度”变量值不正确，请检查。

如何根据变化的变量为宽度设置动画

How to animate width depending on a changing variable

css

css-animations

reactjs