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

【问题标题】：How to animate width depending on a changing variable如何根据变化的变量为宽度设置动画
【发布时间】：2021-12-28 08:46:06
【问题描述】：

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

我尝试了 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 文件或有其他方法来实现它工作。

【问题讨论】：

标签： css reactjs css-animations

【解决方案1】：

我已经尝试了你的两个解决方案，都可以在我的沙箱HERE

上运行

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

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。
是的，它正在工作。我发现了问题，我在自定义组件上创建进度条，在主函数中调用它时，转换不起作用。但是没有使用自定义组件并直接使用它解决了我的问题！