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

完成进度条后CSS停止动画

1 个答案: