完成進度條的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); 
};