如何通过 JavaScript 使进度条缓慢移动答案

【问题标题】：How to make progress bar move slowly by JavaScript如何通过 JavaScript 使进度条缓慢移动
【发布时间】：2018-08-31 11:40:20
【问题描述】：

当我将它的宽度增加 10% 时，它会突然应用，我希望它有一些平滑的运动。

var counter=0;
function moveBy10(x){
  var width =10;
  var bar = document.getElementById('bar');
  counter++;
  if(counter*x < 101){
    bar.style.width = counter*x +'%';
  }
}

#barHolder {
  background-color: black;
  width: 100%;
  height: 80px;
}
#bar {
  background-color: red;
  width:5%;
  height: 80px;
}
#by10 {
  background-color: grey;
  height: 40px;
  width: 100px;
  border-radius: 5px;
  margin-top: 10px;
  padding-top: 10px;
  text-align: center;
  cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
<title>Progress bar</title>
<link rel="stylesheet" type="text/css" href="bar.css">
<script type="text/javascript" src="bar.js"></script>
</head>
<body>
<!--- progress bar container  -->
  <div id="barHolder">
    <div id="bar"></div>
  </div>
  <div type="button" id="by10" onclick="moveBy10(10)">Move 10%</div>
</body>
</html>

【问题讨论】：

缓慢移动是什么意思？难道你不能用JS中的宽度变量的值来做到这一点吗？
哦，我明白你的意思了。您可以使用 setInterval 函数使您的进度条顺利进行，而不会出现这种跳跃效果。
@LazarNikolic 因为我将其宽度增加 10%，它会突然应用，我希望它有一些平滑的运动。
@Teemu 谢谢你的加入。

标签： javascript html css progress-bar

【解决方案1】：

通过向所需元素添加属性转换（在您的情况下为#bar），我们可以实现您使用 CSS 寻求的平滑效果。这将带来更流畅的体验，而不是使用 Javascript 实现相同的效果。

transition: width 2s;

（为宽度的过渡添加2s的平滑）

CSS 过渡允许您在给定的持续时间内平滑地更改属性值（从一个值到另一个值）。

详细了解transitions。

但要完全回答问题以使用 JavaScript（仅）实现相同的结果，我会使用超时来步进到实际步骤的小间隔（如果我们想在 1 秒内转换 10%，我会拆分它每 1% 为 0.1）

但我强烈建议为每个解决方案使用最好的技术，不要在没有充分理由的情况下尝试使用特定技术实现某些目标。

【讨论】：

这与 CSS 完美结合，我可以用 JS 实现同样的目标吗？
CSS 动画更流畅，应尽可能使用。在浏览器支持动画之前，过去使用 JS 来实现动画。有什么理由不想要 CSS？
css 如您所说的那样更平滑。只是出于好奇，我们如何使用 js。
css-tricks.com/…
@SidBhalke 更新了我的答案以包含 JS 方式。

【解决方案2】：

我不明白你的问题，因为你不这样做，但我知道你需要这个

var counter=0;
function moveBy10(x){
  var width =10;
  var bar = document.getElementById('bar');
  counter++;
  if(counter*x < 101){
    bar.style.width = counter*x +'%';
  }
}

#barHolder {
  background-color: black;
  width: 100%;
  height: 80px;
}
#bar {
  background-color: red;
  width:5%;
  height: 80px;
  transition: width 2s; /* Add this */
}
#by10 {
  background-color: grey;
  height: 40px;
  width: 100px;
  border-radius: 5px;
  margin-top: 10px;
  padding-top: 10px;
  text-align: center;
  cursor: pointer;
}

<!DOCTYPE html>
<html>
<head>
  <title>Progress bar</title>
  <link rel="stylesheet" type="text/css" href="bar.css">
  <script type="text/javascript" src="bar.js"></script>
</head>
<body>
  <!--- progress bar container  -->
  <div id="barHolder">
    <div id="bar"></div>
  </div>
  <div type="button" id="by10" onclick="moveBy10(10)">Move 10%</div>
</body>
</html>

【讨论】：