Desactive las transiciones CSS3 de Bootstrap en las barras de progreso

Question

¿Alguien sabe una forma de deshabilitar las transiciones CSS3 de Bootstrap en las barras de progreso? Los estoy actualizando a través de javascript/jquery y no quiero que hagan la animación.

Esto parecía prometedor, pero no pudo conseguir que funcione: Turn Off CSS3 Animation With jQuery?

Información sobre las barras de progreso: http://twitter.github.com/bootstrap/components.html#progress

Answer 1

Puede desactivar los efectos de transición mediante el establecimiento de la regla CSS transition-none, así:

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

Answer 2

Dado que la animación es proviene de la clase active sólo puede utilizar

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

o

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

Answer 3

He resuelto el problema con javascript

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

Para mí su funcionamiento muy bien. No parpadea y simplemente hace su trabajo. También puedes hacerlo con css puro, creo.

Answer 4

También puede hacerlo deteniendo con $(".progress-bar").stop() la animación y luego volver a iniciarla.

Quería que la barra volviera a 0 y comenzar de nuevo a moverme a 100%. Entonces aquí cómo va:

$(".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% 

Espero que ayude a algunos.