Question

我正在使用Bootstrap Progress Bar（PB）来显示流程进度。我的流程是一个AJAX流程。理想情况下，后台任务应该立即向进度条报告后台进程的百分比状态以显示实时进度指示（＆＃34;完成100个任务中的1个＆＃34; ... ＆＃34;完成了100个任务中的99个＆＃34; ），后台任务仅限于发送一个状态报告。那是在AJAX调用结束时。

所以我决定改用循环PB。因此，如果它达到100％，它将再次循环到0％，直到AJAX任务完成并将结束循环。 Bootstrap的问题是100％到0％之间的动画。

在my 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秒，虽然我认为有更好的答案，但这个问题会消失。

Answer 1

如果您向栏中添加transition:none;。然后它只会像你的计时器功能那样快速动画。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

您还可以添加transition-duration:50ms 与动画费率相同，它会平滑动画效果。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

在某些百分比

1 个答案: