动画css进度条没有在更新之间跳转？

Question

我在我的网站上使用这个...

<progress id='video-progress' min='0' max='100' value=''></progress>

这是元素的整个造型......

#video-progress {
    -webkit-appearance: none;
    border: none;
    position:fixed;
    bottom:0;
    left:0;
    height:3px;
    width:100%;
    z-index:1;
}

所以它只是在页面底部从0到100%的屏幕宽度移动.进度条通过Javascript更新.

但是,由于我的视频只有30秒长,因此单步更新将作为进度条的"跳转"执行.因此,酒吧没有平滑的运动.

知道我如何动画进度条或在更新的步骤之间平滑它？

更新:

JavaScript ...... 

function updateProgressBar() {
    var progressBar = document.getElementById('video-progress');
    var percentage = Math.floor((100 / fmVideo.duration) * fmVideo.currentTime);
    progressBar.value = percentage;
}

Answer 1

您可以通过它增加动画它value所有的15 millisecond使用setInterval和停止增加，如果value大于percentage使用clearInterval。

此代码提取电流value并将其递增，直到达到该percentage值为止。

注意： percentage手动设置为70。

var progressBar = document.getElementById('video-progress');

function updateProgressBar() {
  var percentage = 70;
  var curr = progressBar.value;
  var update = setInterval(function() {
    if (curr > percentage) {
      clearInterval(update);
    }
    progressBar.value = curr++;
  }, 15)
}

updateProgressBar();

#video-progress {
  -webkit-appearance: none;
  border: none;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 1;
}

<progress id='video-progress' min='0' max='100' value=''></progress>