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

Question

我试图动画Bootstrap进度条,但我不知道该怎么做.

我得到宽度的值,但console.log(bar_width);返回宽度,px但不是%内联显示style="width:90%.

我用代码重新创建了一个bootply:BootStrap Progress Bar

HTML:

<!-- Skills Progress Bar -->
<section id="skills-pgr">
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="90"
      aria-valuemin="0" aria-valuemax="100" style="width:90%">
            <span>HTML/CSS</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="85"
      aria-valuemin="0" aria-valuemax="100" style="width:85%">
            <span>Photography</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="80"
      aria-valuemin="0" aria-valuemax="100" style="width:80%">
            <span>CMS</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="75"
      aria-valuemin="0" aria-valuemax="100" style="width:75%">
            <span>JavaScript/jQuery</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60"
      aria-valuemin="0" aria-valuemax="100" style="width:60%">
            <span>Photoshop</span>
        </div>
    </div>
</section>

jQuery的:

// Skills Progress Bar
$(function() {
  $('.progress-bar').each(function() {
      var bar_width = $(this).css('width'); // returns the css width value
      var bar_value = $(this).attr('aria-valuenow');
      console.log(bar_width);
      console.log(bar_value);
      $(this).animate({ value: bar_width }, { duration: 2000, easing: 'easeOutCirc' });
  });
});

Answer 1

我假设您希望将进度从零动画到指定的数量aria-valuenow.你快到了!

1. style从每个进度条中删除属性,因为它会立即将它们置于最终数量.
2. 我已经添加%到了bar_value它,以确认它是一个百分比.没有单位,它将被视为像素值.
3. jQuery animate函数需要知道要设置动画的css属性.我已经value在您的代码示例中更改width为动画width属性
4. 在easeOutCirc宽松的功能只存在于jQuery用户界面.我不确定你是否将它作为Bootply的资源,但我在这里添加了它.

// Skills Progress Bar
$(function() {
  $('.progress-bar').each(function() {
    var bar_value = $(this).attr('aria-valuenow') + '%';                
    $(this).animate({ width: bar_value }, { duration: 2000, easing: 'easeOutCirc' });
  });
});

@import url('//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');

/* CSS used here will be applied after bootstrap.css */

/* Skills Progess Bar */

section#skills-pgr {
  padding: 3px 10px 0;
}
#skills-pgr div.progress {
  font-weight: bolder;
  color: #fff;
  background-color: #f3f3f3;
  border: 0px none;
  box-shadow: none;
  height: 2.5em;
}
div.progress-bar > span {
  float: left;
  position: relative;
  top: 9px;
  left: 2%;
  font-size: 14px;
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<!-- Skills Progress Bar -->
<section id="skills-pgr">
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
      <span>HTML/CSS</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
      <span>Photography</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
      <span>CMS</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
      <span>JavaScript/jQuery</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
      <span>Photoshop</span>
    </div>
  </div>
</section>

Answer 2

在Bootstrap 3中，动画制作进度条非常容易。您需要做的就是更改您的宽度.progress-bar，如下所示：

$('.progress-bar').css('width', '80%');

只要您的宽度值需要更新，只需重复该过程，直到过程条达到100％。

演示

$('.progress-bar').css('width', '80%');

var $progress = $('.progress');
var $progressBar = $('.progress-bar');
var $alert = $('.alert');

setTimeout(function() {
    $progressBar.css('width', '10%');
    setTimeout(function() {
        $progressBar.css('width', '30%');
        setTimeout(function() {
            $progressBar.css('width', '100%');
            setTimeout(function() {
                $progress.css('display', 'none');
                $alert.css('display', 'block');
            }, 500); // WAIT 5 milliseconds
        }, 2000); // WAIT 2 seconds
    }, 1000); // WAIT 1 seconds
}, 1000); // WAIT 1 second

.progress, .alert {
    margin: 15px;
}

.alert {
    display: none;
}

（另请参阅此小提琴）