进度条完成时的 CSS 停止动画

Question

所以我只使用 css 为我的文件上传表单上的剥离进度条设置动画。 文件上传成功，上传完成后，（进度条达到100%）动画不会停止！条带继续移动，就好像文件仍在上传一样。谁能告诉我如何解决这个小问题？

我的 CSS 代码

.ajax-file-upload-bar {
  background-color: #0ba1b5;
  width: 0;
  height: 30px;
  border-radius: 3px;
  color:#FFFFFF;
  font-family: calibri;
  background-image: linear-gradient(
    -45deg, 
  rgba(255,255,255,0.25) 25%, 
  transparent 25%, 
  transparent 50%, 
  rgba(255,255,255,0.25) 50%, 
  rgba(255,255,255,0.25) 75%, 
  transparent 75%, 
  transparent
  );
  background-size: 40px 40px;
  display: block;
  height: 100%;
  width: 100%;
  animation: anim_stripes 1s linear infinite;
  -webkit-animation: anim_stripes 1s linear infinite;
}
@keyframes anim_stripes {
  from {
   background-position: 0 0;
  }
  to {
   background-position: 40px 40px;
  }

}

Answer 1

下载文件添加类.paused后可以停止动画

.ajax-file-upload-bar.paused {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

UPD_

JavaScript：

var reader = new FileReader();

reader.onload = function(e) {
   var file = e.target.result;

   $('.ajax-file-upload-bar').addClass('paused);
};