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

デフォルトでブートストラップが.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>