Disable reibungslosen Übergang der Bootstrap Fortschrittsbalken auf bestimmten Prozent

Question

Ich benutze Bootstrap Progress Bar (PB) bei der Anzeige eines Prozesses Fortschritt. Mein Prozess ist ein AJAX-Prozess. Idealerweise sollte die Hintergrund-Task dem Fortschrittsbalken immer wieder den Prozentsatzstatus des Hintergrundprozesses melden, um die Fortschrittsanzeige in Echtzeit anzuzeigen ("1 von 100 abgeschlossenen Tasks" ... "99 von 100 Aufgaben abgeschlossen "), ist die Hintergrundaufgabe beim Senden nur eines Statusberichts begrenzt. Und das ist am Ende des AJAX-Anrufs.

Also habe ich beschlossen, eine Schleife PB statt. Wenn es also 100% erreicht, wird es erneut auf 0% wiederholt, bis der AJAX-Task beendet ist und die Schleife beendet wird. Das Problem mit Bootstrap ist die Animation zwischen 100% und 0%.

In my jfiddle, wenn der PB 100% erreicht, sollte es sofort 0% sein. Aber anstatt sofort auf 0% zu blinken, animiert es den Prozess. Daher geht nur die erste Schleife von 0% auf 100%, die nachfolgenden Schleifen werden zu 25% bis 100% und gehen nie wieder zu 0%.

Ich obwohl die Animation ist wegen der .active Klasse der PB. Also habe ich versucht, das zwischen 100% zu 1% zu entfernen:

Obwohl es immer noch nicht funktioniert. Wie kann ich diesen Übergang nur bei diesem bestimmten PB deaktivieren? Ich kann das Timeout auf 1 Sekunde setzen, und dieses Problem wird verschwinden, obwohl ich denke, dass es bessere Antworten gibt.

Answer 1

Wenn Sie transition:none; zu der Leiste hinzufügen. Dann wird es nur so schnell wie Ihre Timer-Funktion animieren.

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>

Sie können auch transition-duration:50msdie gleiche wie Ihre Animation Rate hinzufügen und es wird belebter glätten.

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>