javascript - 动画进度条？

Question

我使用 XMLHttpRequest() 来发送数据，我有一个上传进度事件，我已经测试并运行:

function uploadProgress(event) {
            if(event.lengthComputable){
                var complete = (event.loaded / event.total * 100 | 0);
                console.log(complete);
                $('.meter').css('width', complete+'%');
            }

        };

问题是，我的进度条从 0、40%、60%、100% 开始跳动。有没有办法让它流畅地动画化，最好是使用 CSS？

Answer 1

将此添加到 CSS 中的 .width:

.meter{
  transition:width .4s;
  -webkit-transition:width .4s;
  -moz-transition:width .4s;
}

在此处阅读有关转换的信息 (Link)

或者，您可以使用 jQuery:

$( ".meter" ).animate({
  width: complete+"%"
});

例如。

function uploadProgress(event) {
  if(event.lengthComputable){
    var complete = (event.loaded / event.total * 100 | 0);
    console.log(complete);
    $('.meter').animate({width:complete+"%"});
  }
};

在此处了解 jQuery 动画 ( Link )