Disattiva le transizioni CSS3 di Bootstrap sulle barre di avanzamento

Question

Qualcuno conosce un modo per disabilitare le transizioni CSS3 di Bootstrap sulle barre di avanzamento? Li sto aggiornando tramite javascript/jquery e non voglio che facciano l'animazione.

Questo sembrava promettente, ma non poteva farlo funzionare: Turn Off CSS3 Animation With jQuery?

Informazioni su barre di avanzamento: http://twitter.github.com/bootstrap/components.html#progress

Answer 1

È possibile disattivare gli effetti di transizione impostando la regola CSS transition-none, in questo modo:

.progress .bar { 
    -webkit-transition: none; 
    -moz-transition: none; 
    -ms-transition: none; 
    -o-transition: none; 
    transition: none; 
}​ 

Answer 2

dal momento che l'animazione è proviene dalla classe active si può semplicemente utilizzare

$('.progress').removeClass('active'); 

o

$('.progress').toggleClass('active'); 

Answer 3

ho risolto il problema con javascript

 $('#proc').hide(); 
     $("#proc").width(0 + "%"); 
     $('#proc').show(); 

Per me il suo funzionamento benissimo. Non lampeggia e sta solo facendo il suo lavoro. Puoi anche farlo con puro css, penso.

Answer 4

È inoltre possibile eseguire l'arresto con $(".progress-bar").stop() l'animazione e quindi riavviarlo.

Desidero riportare la barra a 0 e ricominciare a spostarsi su 100%. Quindi, ecco come funziona:

$(".progress-bar").stop();  //Stopping the current animation at the current width 
$(".progress-bar").animate({width: "0%"}, 100);  //Going back to 0% smoothly in 100ms 
$(".progress-bar").animate({width: "100%"}, 1000); //Restarting the process bar to 100% 

Spero che possa essere d'aiuto.