动画进度元素值

Question

我有一个progress元素。该元素如下所示：

<div class="container">
  <div id="progress-bar">
    <progress id="myProgressBar" class="progress" style="background-color:orange;" value="0" max="100"></progress>
  </div>

  <br>
  <button id="animateButton" class="btn btn-secondary">Animate</button>
</div>

当用户单击“动画”按钮时，我想用橙色条将进度条填充到 75%。动画应该需要 0.5 秒（半秒）。

如这个Bootply所示，我无法让动画正常工作。我尝试使用setInterval，但是，动画真的很生涩。另外，我无法让条形变为橙色。它一直是绿色的。

有没有办法为进度元素的值设置动画以获得流畅的动画？

Answer 1

在 webkit 浏览器中，您可以使用伪类来添加过渡和颜色：

$('#animateButton').on('click', function() {
  $('#myProgressBar').val(75);
});

progress[value]::-webkit-progress-value {
    transition: width 0.5s;
    background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="progress-bar">
    <progress id="myProgressBar" class="progress" style="background-color:orange;" value="0" max="100"></progress>
  </div>

  <br>
  <button id="animateButton" class="btn btn-secondary">Animate</button>
</div>

如果您需要更广泛的浏览器支持，您可以迭代该值，直到达到目标值以动画栏。但是，您无法更改颜色。

function animateProgress($progressBar, val, currentVal) {
  currentVal = currentVal || 0;
  
  var step = val * 16 / 500;
  
  function animate(currentVal) {
    currentVal += step;
  
    $progressBar.val(currentVal);
    
    currentVal < val && requestAnimationFrame(function() {
      animate(currentVal);
    });
  }
  
  animate(currentVal);
}

$('#animateButton').on('click', function() {
  animateProgress($('#myProgressBar'), 75);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="progress-bar">
    <progress id="myProgressBar" class="progress" style="background-color:orange;" value="0" max="100"></progress>
  </div>

  <br>
  <button id="animateButton" class="btn btn-secondary">Animate</button>
</div>