的jQuery

Question

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

使用版本3，可以使用jQuery css动画将进度条设置为给定百分比的动画。 HTML元素属性不能是动画＆＃34;。问题是：我们如何设置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的进度条，如演示版中所示。对于动画的每个帧，您可以更改progress元素的值和/或超时。保持间隔越小，效果就越平滑。

演示

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）

Answer 2

Bootstrap 4进度条使用HTML5 <progress></progress>元素。默认情况下，progress元素不会生成动画，并且当前没有一种良好的跨浏览器方式可以使用CSS动画使它们具有动画效果。 Chris Coyer's site CSS Tricks talks about this.

在撰写本文时，只有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);
}

Fiddle

Answer 3

引导程序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

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

3 个答案:

演示

的jQuery

自定义进度条

HTML

CSS