jQuery进度条宽度和数字动画不流畅答案

【问题标题】：jQuery progress bar width and number animation not smoothjQuery进度条宽度和数字动画不流畅
【发布时间】：2017-08-03 08:07:47
【问题描述】：

我正在尝试编写 jQuery 函数，它将动画进度条的宽度从 0% 到 XY%，同时，它还动画数字增量（也从 0% 到 XY%）。

到目前为止，我最终得到了这个 Page.html

$('.progress-bar').each(function() {
    var bar = $(this);
    var value = $(this).find('.count');

    bar.prop('Counter', 0).animate({
            Counter: parseFloat(bar.attr('aria-valuenow'))
        },
        {
            duration: 3000,
            easing: 'swing',      
            step: function(now) {
                var number = parseFloat(Math.round(now * 100) / 100).toFixed(2);
                bar.css({ 'width': number + '%' });
                value.text(number + '%');
            }
        });
});

/**
 * Progress bars with centered text
 */

.progress {
  position: relative;
}

.progress span {
    position: absolute;
    display: block;
    width: 100%;
    color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-git.js"></script>
  <script src="page.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="page.css">
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    <span class="count"></span>
  </div>
</div>


</body>
</html>

问题是，进度条宽度的动画不流畅。数字增量工作正常，但看起来条宽动画跟不上。数字增量动画完成后，宽度的最后 20% 左右会在 200 毫秒内进行动画处理。

我不太确定，有什么问题，有人可以帮我解决这个问题吗？

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

这可能是因为 width css 属性已经应用了缓动：

transition: width .6s ease;

这就是为什么条形图的表示总是有点落后。

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

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

【讨论】：

【解决方案2】：

您的问题是干扰过渡解决方案：将其添加到样式中

.progress-bar {
  transition:0s all !important
}

【讨论】：