javascript - 如何为进度条的宽度变化设置动画？

Question

我正在使用文件阅读器将图像加载到 html5 Canvas 中；我正在尝试建立一个进度条；它有效，但它的行为不是很流畅......我的意思是条形从 0 px 的大小开始，然后以不平稳的方式增加；是否有可能增加更平滑的条形尺寸？

代码:

reader.readAsDataURL(file);

function updateProgress(evt) {
    jQuery('.file-loading-bar').width(100 * (evt.loaded / evt.total) + '%');
}

reader.onloadstart = function() {
    jQuery('.file-loading-bar').width(0);
}

reader.onprogress = updateProgress;

Answer 1

您可以使用 CSS3:

.file-loading-bar {
  -webkit-transition: width 0.5s;
          transition: width 0.5s;
}