动画进度元素值

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>

当用户点击＆＃34;动画＆＃34;按钮，我想用橙色条填充进度条到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>

Answer 2

以下是使用流畅的CSS3动画完成的方法：根本不需要jQuery甚至JS动画。

var progressBar = document.getElementById("progress-bar")

document.getElementById("animateButton").onclick= function(){
	progressBar.style.width = "75%"
	progressBar.style["background-color"] = "orange"
}

.container {
  height: 30px;
}
.container #progress-bar {
  background-color: #008000;
  height: 100%;
  width: 10%;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

<div class="container">
  <div id="progress-bar"></div>
</div>

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

Answer 3

您可以使用JQuery动画并将时间间隔设置为＆＃34;慢＆＃34;，＆＃34;快＆＃34;或以毫秒为单位。

＆＃13;

＆＃13;

$("#progress-bar").click(function(){
        $("#myProgressBar").animate({width: "100px"},slow);
    });

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是一个例子

＆＃13;

＆＃13;

document.getElementById("animateButton").onclick= function(){
	document.getElementById("progress-bar").style.backgroundColor = "orange";
  document.getElementById("progress-bar").style.width = "75%";
}

＆＃13;

#progressHolder{
background:grey;
height:20px;
width:300px;
}

#progress-bar{
background:grey;
height:20px;
width:0px;

transition:background-color 0.5s, width 0.5s;
}

＆＃13;

<div class="container">
  <div id="progressHolder">
  <div id="progress-bar">
  </div>
  </div>
  <br>
  <button id="animateButton" class="btn btn-secondary">Animate</button>
</div>

＆＃13;

＆＃13;

＆＃13;