Question

我使用javascript递增引导进度条（见下文）。每次进度条开始时，它似乎跳到起始值之上，然后再降低并正确设置动画。

也许问题源于这样一个事实，即进度条最初是隐藏的，但是我已经完成了代码并且它看起来都很好。

有人知道如何在bootstrap进度条中获得平滑增量吗？

增加Javascript：

$(".click").click(function() {
  $(".progress").removeClass('hidden');
  var prog_bar = $(".progress-bar");
  var val = 0;
      (function myLoop (i) {
        setTimeout(function () {
            val += 1;
            prog_bar.attr('aria-valuenow', val);
            prog_bar.css('width', val + '%');
            if (--i) myLoop(i);
        }, 500)
    })(100);
});

请参阅JSFiddle以获取示例：

jsfiddle

Answer 1

您要导入的CSS正在规则上设置最小宽度为30px：

.progress-bar[aria-valuenow="0"]

最简单的修复就是在你的html中覆盖它，或者你可以用纯css覆盖它，如果你不喜欢内联css。只需使用我上面指定的规则。

Working jsfiddle

  <div class="progress-bar" role='progressbar' aria-valuemax="100"
 style="width: 0px;min-width:0px;" aria-valuemin="0" aria-valuenow="0">

Bootstrap进度条的奇怪跳跃行为

1 个答案: