如何在Bootstrap 4中为进度条添加动画效果？

Question

我们曾经在Bootstrap 3中将进度百分比定义为CSS属性。新的Bootstrap 4版本有一个<progress>元素和一个value属性。

在版本3中，可以使用jQuery css动画将进度条动画到给定的百分比。HTML元素属性不能被"animated"。问题是：我们如何动画Bootstrap 4进度条的百分比？我想这是可能的，否则它将是从boostrap 3的一大后退。

相关问题：如何在Bootstrap 3中动画进度条？但它是针对Bootstrap 3的。在jQuery中，属性可以通过attr()设置，但无法按属性值（据我所知）进行动画处理。

- nagylzs

---

这是一个愚蠢的问题。意识到我可以仍然使用CSS宽度而不是值。$（“#progressbar”）.animate（{“width”：data [“percent”] +“％”}，{duration：500，easing：'linear'}）; - nagylzs

Answer 1

在JavaScript中，您可以通过创建递归函数来创建自己的自定义动画。

在该函数内部，您有一个setTimeout，它会暂停函数执行一定毫秒数，直到下一帧要执行。在setTimeout中，函数调用自身，并且只要某个条件有效，此过程就会不断重复。当条件变为无效时，动画停止并且函数停止调用自身。

您可以使用此技术将动画添加到Bootstrap 4的进度条中，如下面的演示所示。在每个动画帧中，您可以更改进度元素和/或超时的值。您保持间隔越小，效果就越平滑。

---

一个演示

var $alert = $('.alert');
var $progressBar = $('.progress');

var progress = 0;      // initial value of your progress bar
var timeout = 10;      // number of milliseconds between each frame
var increment = .5;    // increment for each frame
var maxprogress = 110; // when to leave stop running the animation

function animate() {
    setTimeout(function () {
        progress += increment;
        if(progress < maxprogress) {
            $progressBar.attr('value', progress);
            animate();
        } else {
            $progressBar.css('display', 'none');
            $alert.css('display', 'block');
        }
    }, timeout);
};
animate();

.pad {
    padding: 15px;
}

.alert {
    display: none;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<div class="pad">
    <progress class="progress" value="0" max="100">0%</progress>
    <div class="alert alert-success" role="alert">Loading completed!</div>
</div>

(另请参见这个Fiddle)

- John Slegers

---

@WayBehind：谢谢！非常感谢您的评论 :-) - John Slegers

非常好。这应该是被接受的答案。 - Mormoran

Answer 2

Bootstrap 4进度条使用HTML5的<progress></progress>元素。默认情况下，进度元素不会动画，目前没有一种好的跨浏览器方式来使用CSS动画使它们动画化。 Chris Coyer的网站CSS Tricks谈论了这个问题。

在撰写本文时，只有WebKit / Blink浏览器支持进展元素上的动画。我们将通过更改背景位置来对-webkit-progress-value上的条纹进行动画处理。

这要求我们要么使用JavaScript，要么手动使用<div>元素样式化我们的进度条。这可能会发生变化，因为Bootstrap 4目前处于alpha阶段。相关问题是twbs/bootstrap#17148

jQuery

可以通过jQuery以你上面评论的方式完成此操作。

var percentage = 20;
$("#progressbar")
  .animate({
    "value": percent + "%"
  }, {
    duration: 600,
    easing: 'linear'
  });

自定义进度条

更改类名以避免冲突，您将拥有一个完全相同的进度条，可以通过CSS动画进行动画处理。

HTML

<div class="progress">
  <div class="progress-bar" style="width: 60%;">
  </div>
</div>

CSS

.progress-bar {
    height: 100%;
    width: 0;
    color: #fff;
    background-color: #337ab7;
    transition: width .6s ease;
}

.progress {
    height: 1em;
    width: 100%;
    background-color: #f5f5f5;
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

小提琴

- 0xcaff

---

Bootstrap 4自从合并拉取请求[21473]（https://github.com/twbs/bootstrap/pull/21473）后停止使用HTML5 <progress>。 - rohanc

Answer 3

Bootstrap 4 现在有了 progress-bar-animated 类。您可以通过编程来切换此类，以创建动画进度条效果。例如，使用 jQuery：

$('#btn').click(function() {

  var timerId, percent;

  // reset progress bar
  percent = 0;
  $('#btn').attr('disabled', true);
  $('#progress').css('width', '0px').addClass('progress-bar-animated active');
  $('#progress').html('<span class="spinner-border spinner-border-sm ml-auto"></span>');

  timerId = setInterval(function() {

    // increment progress bar
    percent += 5;
    $('#progress').css('width', percent + '%');

    if (percent >= 100) {
      clearInterval(timerId);
      $('#btn').attr('disabled', false);
      $('#progress').removeClass('progress-bar-animated progress-bar-striped active').html('Complete');
    }
  }, 300);
});

Demo

- Zim