动画css进度条而不在更新之间跳转？答案

【问题标题】：Animate css progress bar without jumping between updates?动画css进度条而不在更新之间跳转？
【发布时间】：2015-02-12 02:52:31
【问题描述】：

我正在我的网站上使用它……

<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;
}

【问题讨论】：

能否也添加 JavaScript 代码？
能否也添加 JavaScript？
我更新了js代码。

标签： html css video progress-bar html5-video

【解决方案1】：

您可以通过使用setInterval 在每个15 millisecond 递增其value 来为其设置动画，如果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;
}

&lt;progress id='video-progress' min='0' max='100' value=''&gt;&lt;/progress&gt;

【讨论】：

【解决方案2】：

这对我来说非常适合！

function smoothProgress(e) {
    var id = $("#"+e.data.id),
        dur = 5000,
        seq = 100,
        max = parseInt( id.attr("max"), 10),
        chunk = max / dur * seq,
        loop = setInterval(function() {
        if( id.val() < max )
            id.val( id.val() + chunk );
        else
            clearInterval(loop);
        }
    }, seq);
}
$(document).ready(function() {
    $("#launch").on("click", {id: $("progress").attr("id")}, smoothProgress);
});

当然，您可以调整dur参数或根据您的视频时长动态检索它，以及seq参数（越低越流畅）。

这是一个fiddle 用于演示。

【讨论】：