在某些百分比上禁用Bootstrap进度栏的平滑动画过渡

debugcn 发表于 Dev

基甸

我正在使用Bootstrap进度栏（PB）来显示进程进度。我的流程是AJAX流程。理想情况下，后台任务应立即向进度栏报告，然后再向后台进程报告百分比状态，以显示实时进度指示（“ 100个任务中有1个已完成... ... 100个任务中有99个已完成”），则后台任务仅限于发送一份状态报告。这就是AJAX调用的结尾。

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

在我的文章中，当PB达到100％时，应该立即为0％。但是，它不会立即闪烁到0％，而是为该过程添加了动画效果。因此，只有第一个循环变为0％到100％，随后的循环达到25％到100％，再也不会达到0％了。

我虽然动画是因为.activePB的类。因此，我尝试删除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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-19

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章