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

【问题标题】：Turn off Bootstrap's CSS3 transitions on progress bars在进度条上关闭 Bootstrap 的 CSS3 过渡
【发布时间】：2012-03-08 17:28:52
【问题描述】：

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

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

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

【问题讨论】：

可能很愚蠢，但你不能只编辑 CSS 并删除对 *-transition 的引用吗？

标签： javascript jquery twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

做到了！应该一直在寻找转换属性。谢谢！
将 CSS 选择器更改为 .progress-bar 以禁用 Bootstrap 3.0 中的过渡效果
我添加了一个像no-transition 这样的新类，这种风格标记为!important，这样我就可以有选择地为特定的进度条关闭它。

【解决方案2】：

由于动画来自 active 类，您可以直接使用

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

或

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

【讨论】：

这个问题更多的是关于过渡而不是动画

【解决方案3】：

我用javascript解决了这个问题

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

对我来说它工作正常。不闪烁，只是做它的工作。我认为您也可以使用纯 css 来完成。

【讨论】：

【解决方案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%

希望对大家有所帮助。

【讨论】：