javascript - style - Desactivar las transiciones CSS3 de Bootstrap en las barras de progreso

style html

Question

¿Alguien sabe una manera 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 podía hacerlo funcionar: ¿ Desactivar la animación CSS3 con jQuery?

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

Answer 1

Dado que la animación proviene de la clase active , solo puede utilizar

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

o

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

Answer 2

Resolví el problema con javascript.

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

Para mí está funcionando bien. No parpadea y solo hace su trabajo. También puedes hacerlo con css puro creo.

Answer 3

También puede hacerlo deteniendo con $(".progress-bar").stop() la animación y luego comenzar de nuevo.

Quería que la barra volviera a 0 y empezar de nuevo para pasar al 100% . Así que aquí 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 sirva de ayuda.

Answer 4

Puede desactivar los efectos de transición estableciendo la regla de transition css en none , así:

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