禁用某些百分比的Bootstrap进度条的平滑动画转换

我使用Bootstrap进度条（PB）显示进程进度。我的过程是一个AJAX过程。理想情况下，后台任务应该时时向进度条报告后台进程的百分比状态，以显示实时进度指示（“完成100个任务中的1个” ... “99个100任务完成“），后台任务仅限于发送一个状态报告。这就是AJAX调用的结尾。禁用某些百分比的Bootstrap进度条的平滑动画转换

所以我决定做一个循环PB。所以如果它达到100％，它会再次循环到0％，直到AJAX任务结束并结束循环。 Bootstrap的问题是100％到0％之间的动画。

在my jfiddle，当PB达到100％时，它应该立即为0％。但不是立即闪烁到0％，而是激发了过程。因此只有第一个循环变为0％到100％，后续循环变为25％到100％，再也不会变成0％。

我虽然动画是因为PB的.active类。所以我试图在100％到1％之间删除：

var increment = function(value) { 
    if(x > 100) { 
     x = 0; 
     progressBar.parent().removeClass("active"); 
    } 
    else if(x == 1) { 
     progressBar.parent().addClass("active"); 
    } 

    progressBar 
     .attr('aria-valuenow', value % 100) 
     .css('width', (value % 100) + '%') 
     .text(""); 
};

虽然它仍然不起作用。我如何才能禁用这个特定PB上的转换？我可以将超时设置为1秒，而这个问题将会消失，尽管我认为有比这更好的答案。

来源

2016-04-21 Gideon

如果您将transition:none;添加到栏中。然后它只会像定时器功能一样快速地动画。

var progressBar = $("div.progress-bar"); 
 
var x = 0; 
 
var increment = function() { 
 
    x = (x > 100) ? 0 : x + 1; 
 
    progressBar.css('width', (x % 100) + '%'); 
 
}; 
 

 

 
window.setInterval(increment, 50);

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-sm-12"> 
 
    <div class="progress progress-striped active"> 
 
     <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition:none;"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

您还可以添加transition-duration:50ms同为动画率，它会平滑动画。

var progressBar = $("div.progress-bar"); 
 
var x = 0; 
 
var increment = function() { 
 
    x = (x > 100) ? 0 : x + 1; 
 
    progressBar.css('width', (x % 100) + '%'); 
 
}; 
 

 

 
window.setInterval(increment, 50);

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-sm-12"> 
 
    <div class="progress progress-striped active"> 
 
     <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration:50ms;"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-04-21 15:10:40 Neoaptt

禁用某些百分比的Bootstrap进度条的平滑动画转换

回答

相关问题