Wyłącz przejścia funkcji CSS3 w Bootstrap na paskach postępu

Question

Ktoś wie, w jaki sposób wyłączyć przejścia programu Bootstrap w CSS3 na pasku postępu? Aktualizuję je za pomocą javascript/jquery i nie chcę, aby robili animację.

Ten wyglądał obiecująco, ale nie mógł zmusić go do pracy: Turn Off CSS3 Animation With jQuery?

informacji na paski postępu: http://twitter.github.com/bootstrap/components.html#progress

Answer 1

Można wyłączyć efekty przejścia przez ustawienie reguły css transition do none, tak jak poniżej:

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

Answer 2

Ponieważ animacja pochodzi z klasy active można po prostu użyć

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

lub

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

Answer 3

I rozwiązać problem z javascript

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

Dla mnie jest w porządku pracy. Nie miga i po prostu wykonuje swoją pracę. Możesz też zrobić to z czystym CSS, jak sądzę.

Answer 4

Można to również zrobić zatrzymując się z $(".progress-bar").stop() animacją, a następnie uruchomić ponownie.

Chciałbym mieć pasek z powrotem do 0 i zacząć ponownie, aby przejść do 100%. Więc jak to działa:

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

Mam nadzieję, że to pomoże niektórych.