使用 jQuery 为 Bootstrap 进度条宽度设置动画答案

【问题标题】：Animating Bootstrap progress bar width with jQuery使用 jQuery 为 Bootstrap 进度条宽度设置动画
【发布时间】：2014-06-27 19:29:52
【问题描述】：

我想在 2.5 秒内将进度条的宽度从 0% 变为 70%。但是，下面的代码会在 2.5 秒延迟后立即将宽度更改为 70%。我错过了什么？

$(".progress-bar").animate({
    width: "70%"
}, 2500);

JSFiddle： http://jsfiddle.net/WEYKL/

【问题讨论】：

我的朋友你用什么浏览器测试，我在firefox 28中检查你的代码，它工作得很好。

标签： javascript jquery twitter-bootstrap jquery-animate progress-bar

【解决方案1】：

问题在于默认的 Bootstrap 过渡效果，它会为 width 属性的任何更新设置动画。

如果你关闭它并抑制相应的样式，它会正常工作，例如：

.progress-bar {
    -webkit-transition: none !important;
    transition: none !important;
}

演示： http://jsfiddle.net/WEYKL/1/

【讨论】：

做到了。我只是注意到 Safari 处理动画很好，但 Chrome 的 Bootstrap 的过渡效果有问题。谢谢！
@user3088077 是的，Chrome 很可能会尝试将这两种动画结合起来，并在 jQuery 动画已经在内部完成时只显示 CSS 过渡。
如何在同一页面中使用多个进度条？
如何让它变得从容？

【解决方案2】：

因此，通过 CSS 或 jQuery 调整过渡效果更有意义。

.progress-bar {
    -webkit-transition: width 2.5s ease;
    transition: width 2.5s ease;
}

只需更改宽度值。

$(".progress-bar").css('width', '70%');

【讨论】：

【解决方案3】：

这很容易如果使用引导进度条，

只将属性 aria-valuenow="percent_required%" 添加到具有“progress-bar”类的 div 中，如下所示：

<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="57%" aria-valuemin="0" aria-valuemax="57">

接下来，关于脚本：

<script>
  $(document).on('ready',function(){
    $('.progress .progress-bar').css("width",function() {
      return $(this).attr("aria-valuenow") + "%";
    })
  })
</script>

重新加载，开始！

【讨论】：

【解决方案4】：

你可以通过添加来修复它：

.progress .progress-bar {
  transition: unset;
}

var delay = 500;
$(".progress-bar").each(function(i) {
  $(this).delay(delay * i).animate({
    width: $(this).attr('aria-valuenow') + '%'
  }, delay);

  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: delay,
    // easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now) + '%');
    }
  });
});

.progress {
  margin-bottom: 20px;
}

.progress-bar {
  width: 0;
}

.bg-purple {
  background-color: #825CD6 !important;
}

.progress .progress-bar {
  transition: unset;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Bootstrap 4 Progress Bars</h2>
  <div class="progress border">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70</div>
  </div>
  <div class="progress border">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50</div>
  </div>
  <div class="progress border">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-purple" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90</div>
  </div>
</div>

【讨论】：