如何在Bootstrap 4中为进度栏设置动画？

Question

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

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

相关问题：如何在Bootstrap 3中为进度栏设置动画？但这是用于引导程序3的。在jQuery中，可以通过attr（）设置属性，但无法通过属性值（AFAIK）设置动画。

Answer 1

Bootstrap 4 进度条使用 HTML5<progress></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);
}

小提琴

Answer 2

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

（另请参阅此小提琴）