Question

任何人都知道在进度条上禁用Bootstrap的CSS3过渡的方法吗？我正在通过javascript / jquery更新它们，并且不希望它们进行动画制作。

这看起来很有希望，但无法让它发挥作用：Turn Off CSS3 Animation With jQuery?

有关进度条的信息：http://twitter.github.com/bootstrap/components.html#progress

Answer 1

您可以将css transition规则设置为none来关闭过渡效果，如下所示：

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

Answer 2

由于动画来自active课程，您可以使用

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

或

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

Answer 3

我用javascript解决了这个问题

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

对我来说它的工作正常。没有闪烁，只是做它的工作。你也可以用纯CSS来做到这一点。

Answer 4

您也可以使用$(".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%

我希望它会帮助一些人。

在进度条上关闭Bootstrap的CSS3过渡

4 个答案: