twitter-bootstrap 如何在 Bootstrap 4 中为进度条设置动画？

How to animate a progress bar in Bootstrap 4?

提问by nagylzs

We used to have the progress percentage defined as a CSS attribute in Bootstrap 3. The new Bootstrap 4 version has a <progress>element and a valueattribute.

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

With version 3, it was possible to use jQuery css animation to animate the progress bar to a given percentage. HTML element attributes cannot be "animated". Question is: how can we animate the percentage of a bootstrap 4 progress bar? I guess it is possible, otherwise it would be a big backstep from boostrap 3.

在版本 3 中，可以使用 jQuery css 动画将进度条设置为给定百分比。HTML 元素属性不能被“动画化”。问题是：我们如何为 bootstrap 4 进度条的百分比设置动画？我想这是可能的，否则这将是 boostrap 3 的一大退步。

Related question: How to animate a progress bar in Bootstrap 3?but it is for bootstrap 3. In jQuery, attributes can be set by attr() but it is not possible to animate by an attribute value (AFAIK).

相关问题：如何在 Bootstrap 3 中为进度条设置动画？但它用于引导程序 3。在 jQuery 中，可以通过 attr() 设置属性，但不能通过属性值 (AFAIK) 设置动画。

采纳答案by 0xcaff

Bootstrap 4 progress bars use the HTML5 <progress></progress>element. By default, the progress element doesn't animate and there currently isn't a good cross browser way to make them animate using CSS animations. Chris Coyer's site CSS Tricks talks about this.

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

At the time of writing only WebKit/Blink browsers support animations on progress element. We'll animate the stripes on -webkit-progress-value by changing the background position.

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

This requires us to either use JavaScript, or manually style our progress bar using <div>elements. This will probably change since Bootstrap 4 is currently in the alpha stage. The relevant issue is twbs/bootstrap#17148

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

jQuery

jQuery

This can be done through jQuery the way you commented above.

这可以通过您在上面评论的方式通过 jQuery 完成。

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

Custom Progress Bar

自定义进度条

Change the class names to prevent collisions and you will have an identical progress bar which is animated by CSS animations.

更改类名称以防止冲突，您将拥有一个由 CSS 动画制作的相同进度条。

HTML

HTML

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

CSS

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

Fiddle

小提琴

回答by John Slegers

In JavaScript, you can create your own custom animations by creating a recursive function.

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

Inside that function, you have a setTimeoutthat stops execution of the function for a specific number of milliseconds until the next frame is to be executed. Inside the setTimeout, function calls itself, and this process keeps repeating as long as a certain condition is valid. The animation shops when the condition becomes invalid and the function stops calling itself.

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

You can use this technique to add animation Bootstrap 4's progress bar, as shown in the demo blow. With each frame of the animation, you can change the value of your progress element and/or your timeout. The smaller you keep your intervals, the smoother the effect will be.

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

---

---

A demo

一个演示

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>

(see also this Fiddle)

（另见这个小提琴）

回答by Zim

Bootstrap 4now has the progress-bar-animatedclass. You can programmatically toggle this class to create an animated progress bar effect. For example, using jQuery:

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

演示