關閉進度條上的Bootstrap的CSS3轉換

任何人都知道一種方法來禁用進度條上的Bootstrap的CSS3轉換？我通過javascript/jquery更新它們，並且不希望它們執行動畫。關閉進度條上的Bootstrap的CSS3轉換

這看起來前途無量，但無法得到它的工作：Turn Off CSS3 Animation With jQuery?

信息上的進度條：http://twitter.github.com/bootstrap/components.html#progress

2012-03-08 user1006426

可能很愚蠢，但是您不能只編輯CSS並刪除對*轉換的引用？ – 2012-03-08 17:49:07

您可以通過CSS transition規則設置爲none，像這樣關閉過渡效果：

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

來源

2012-03-08 18:31:28

這樣做！應該一直在尋找轉換屬性。謝謝！ – user1006426 2012-03-08 20:05:04

將CSS選擇器更改爲.progress-bar，以禁用Bootstrap 3.0中的過渡效果。 – 2013-12-06 10:34:08

我添加了一個新的類，如'no-transition'，這種樣式標記爲'！important'，這樣我可以選擇性地將它變成關閉特定的進度條。 – 2016-04-22 13:53:00

由於動畫是來自active類，你可以只使用

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

或

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

來源

2012-03-09 06:57:11 vicentedealencar

這個問題比動畫更關於轉換 – rpechayr 2013-06-11 14:53:16

我解決了這個問題用JavaScript

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

對我來說，它的工作的罰款。不閃爍，只是在做它的工作。你也可以用我認爲的純CSS來做到這一點。

來源

2016-12-27 17:05:32

你也可以用$(".progress-bar").stop()停止動畫，然後重新開始。

我想讓酒吧回到0並重新開始移動到100%。所以在這裏它是怎麼回事：

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

我希望它會幫助一些。

來源

2017-06-24 01:02:08 Sylhare

關閉進度條上的Bootstrap的CSS3轉換

回答

相關問題