在一定百分比上禁用引导进度条的平滑动画过渡

Disable smooth animation transition of Bootstrap Progress Bar on certain percent

本文关键字：平滑 动画 百分比      更新时间：2023-09-26

我正在使用引导进度栏（PB）来显示进程进度。我的进程是一个 AJAX 进程。理想情况下，后台任务应不时向进度条报告后台进程的百分比状态，以显示实时进度指示（"已完成 100 个任务中的 1 个"......"已完成 100 个任务中的 99 个"），后台任务仅限于发送一个状态报告。这是在 AJAX 调用结束时。

所以我决定做一个循环PB。因此，如果它达到 100%，它将再次循环到 0%，直到 AJAX 任务完成并结束循环。Bootstrap 的问题在于动画介于 100% 到 0% 之间。

在我的 jfiddle 中，当 PB 达到 100% 时，它应该立即为 0%。但它不会立即闪烁到 0%，而是使该过程动画化。因此，只有第一个循环转到 0% 到 100%，后续循环转到 25% 到 100%，再也不会转到 0%。

我虽然动画是因为PB的.active类。所以我试图在 100% 到 1% 之间删除它：

var increment = function(value) {
    if(x > 100) {
        x = 0;
        progressBar.parent().removeClass("active");
    }
    else if(x == 1) {
        progressBar.parent().addClass("active");
    }
    progressBar
        .attr('aria-valuenow', value % 100)
        .css('width', (value % 100) + '%')
        .text("");
};

虽然它仍然不起作用。如何仅在此特定 PB 上禁用该转换？我可以将超时设置为 1 秒，这个问题会消失，尽管我认为有比这更好的答案。

>如果将transition:none;添加到栏中。然后它只会像计时器函数一样快地制作动画。

var progressBar = $("div.progress-bar");
var x = 0;
var increment = function() {
  x = (x > 100) ? 0 : x + 1;
  progressBar.css('width', (x % 100) + '%');
};
window.setInterval(increment, 50);
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-12">
    <div class="progress progress-striped active">
      <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition:none;">
      </div>
    </div>
  </div>
</div>

您还可以添加与动画速率相同的transition-duration:50ms，它将平滑动画。

var progressBar = $("div.progress-bar");
var x = 0;
var increment = function() {
  x = (x > 100) ? 0 : x + 1;
  progressBar.css('width', (x % 100) + '%');
};
window.setInterval(increment, 50);
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-12">
    <div class="progress progress-striped active">
      <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition-duration:50ms;">
      </div>
    </div>
  </div>
</div>

相关文章：