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）

Answer 2

使用CSS transitions：

.meter {
  -webkit-transition: width 200ms ease-in-out 0ms;
  transition: width 200ms ease-in-out 0ms;
}

动画进度条？

2 个答案: