jQuery animate() 宽度持续时间

Question

我正在尝试为进度条的宽度设置动画，但无论我使用多长时间，动画都需要相同的时间。在 Chrome 它只是延迟。在 Firefox 中，动画在开始时较慢，在 en 中较快。我不知道为什么会这样。

var $progressBar = $(".progress-bar")
$progressBar.animate({
  width: $progressBar.text()
}, 5000);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12">
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:0%">60%</div>
  </div>
</div>

Answer 1

问题是因为默认情况下 Bootstrap 在 .progress-bar 元素的 CSS 上应用了 transition: width 规则。这会干扰 jQuery 动画栏宽度的逻辑，因此您需要重写 CSS 规则以将其删除，如下所示：

var $progressBar = $(".progress-bar");
$progressBar.animate({
  width: $progressBar.text()
}, 5000);

div .progress-bar {
  transition: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12">
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:0%">60%</div>
  </div>
</div>

jQuery animate() 宽度持续时间

jQuery animate() width duration

jquery

twitter-bootstrap

jquery-animate