javascript - 如何在 Bootstrap 4 中制作进度条动画？

Question

我们曾经在 Bootstrap 3 中将进度百分比定义为 CSS 属性。新的 Bootstrap 4 版本 has a <progress> element and a value attribute .

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

相关问题:How to animate a progress bar in Bootstrap 3?但它适用于 bootstrap 3。在 jQuery 中，属性可以通过 attr() 设置，但不可能通过属性值 (AFAIK) 设置动画。

Answer 1

在 JavaScript 中，您可以通过创建一个 recursive function 来创建您自己的自定义动画。 .

在那个函数里面，你有一个 setTimeout在执行下一帧之前停止执行该函数特定的毫秒数。在setTimeout 内部，函数调用自身，只要某个条件有效，这个过程就会不断重复。当条件变为无效且函数停止调用自身时，动画开始播放。

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

---

演示

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>

(另见 this Fiddle)