如何仅使用JS在循环中给div宽度逐次加1%并实现平滑增长效果

你的代码无法实现平滑增长的核心原因是：同步执行的for循环不会触发浏览器逐帧渲染，所有DOM样式修改会被合并到循环结束后一次性更新，最终进度条会直接跳转到82%宽度，看不到逐次增长的过程。

这种方案性能最好、动画最顺滑，完全支持自定义触发条件，只需要给进度条加过渡属性，JS主动设置最终宽度即可：

补充CSS样式 #

.child-bar {
  /* 基础样式，确保能设置宽度 */
  display: inline-block;
  height: 100%;
  /* 初始宽度为0 */
  width: 0;
  /* 0.8秒的宽度过渡动画，时长可自行调整 */
  transition: width 0.8s ease;
  background: #2385bb; /* 进度条颜色可自行修改 */
}
.parent-bar {
  height: 20px;
  background: #eee;
}
.parent-bar h4 {
  display: inline;
  margin-left: 10px;
}

修改后JS代码 #

window.onload = function(){
  const bars = document.querySelectorAll(".child-bar");
  // 可以自行调整触发条件，比如滚动到对应区域再执行
  for (let i = 0; i < bars.length; i++) {
    // 直接设置最终宽度，浏览器自动完成平滑过渡
    bars[i].style.width = '82%';
  }
}

完整HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="skill">
  <label for="HTML">HTML</label>
  <div class="parent-bar">
    <span class="child-bar"></span>
    <h4>82%</h4>
  </div>
</div>

如果你需要精确控制每一步的宽度增长逻辑，可以用requestAnimationFrame实现逐帧更新：

window.onload = function(){
  const bars = document.querySelectorAll(".child-bar");
  for (let i = 0; i < bars.length; i++) {
    let currentWidth = 0;
    const targetWidth = 82;
    // 逐帧更新函数
    function updateBar() {
      if (currentWidth >= targetWidth) return;
      currentWidth += 1;
      bars[i].style.width = currentWidth + '%';
      requestAnimationFrame(updateBar);
    }
    // 可自定义触发时机，比如滚动到可视区域后调用updateBar()
    updateBar();
  }
}

内容的提问来源于stack exchange，提问作者That Dude24