如何在Bootstrap 4中动画进度条？ [英] How to animate a progress bar in Bootstrap 4?

问题描述

我们以前在Bootstrap 3中将进度百分比定义为CSS属性。新的Bootstrap 4版本 有< progress> 元素和值属性 。

对于版本3，可以使用jQuery css动画来将进度条设置为给定的百分比。 HTML元素属性不能是动画。问题是：我们如何动画一个引导4进度条的百分比？我想这是可能的，否则它会是一个很大的后台从boostrap 3。

相关问题：如何为引导进度条设置动画？但是它是用于引导3.在jQuery中，属性可以通过attr（）设置，但它是

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

在编写本书时，只有WebKit / Blink浏览器支持progress元素的动画。我们将通过改变背景位置来动画-webkit-progress-value上的条纹。

这需要我们使用JavaScript，或者使用< div> 元素手动设置我们的进度条。这可能会改变，因为Bootstrap 4目前在alpha阶段。相关问题是 twbs / bootstrap＃17148

jQuery

这可以通过jQuery以上的注释方式完成。

  var percentage = 20; 
 $（＃progressbar）
 .animate（{
value：percent +％
}，{
 duration：600，
asing：'linear'
}）; 
  

自订进度栏

HTML

 < div class =progress> 
< div class =progress-barstyle =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）; 
} 
  

小提琴

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 value attribute.

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.

Related question: How to animate a bootstrap progress bar? 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 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.

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.

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

jQuery

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

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.

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

这篇关于如何在Bootstrap 4中动画进度条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！