css - 如何在 View 中设置 Bootstrap 进度条的动画？

Question

我希望在 bootstrap 的进度条滚动查看后对其进行动画处理，现在它会在页面加载后立即进行动画处理，一旦我滚动到进度条，它就会完成动画处理。

HTML:

<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="75">HTML</div>
</div>
<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="65">CSS</div>
</div>
<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="20">JavaScript</div>
</div>
<div class="progress">
  <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="25">WordPress</div>
</div>

CSS:

.progress .progress-bar.six-sec-ease-in-out {
-webkit-transition: width 6s ease-in-out;
-moz-transition: width 6s ease-in-out;
-ms-transition: width 6s ease-in-out;
-o-transition: width 6s ease-in-out;
transition: width 6s ease-in-out;

Answer 1

试试这个 https://jsfiddle.net/audLoLb0/1/

HTML

<div class="progress-element">
    <p>HTML</p>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="75"  aria-valuemin="0" aria-valuemax="100" >                
        </div>
    </div>  
    <p>CSS</p>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="65"  aria-valuemin="0" aria-valuemax="100" >                
        </div>
    </div>  
    <p>JavaScript</p>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="20"  aria-valuemin="0" aria-valuemax="100" >                
        </div>
    </div>  
    <p>Wordpress</p>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="25"  aria-valuemin="0" aria-valuemax="100" >                
        </div>
    </div>  
</div><!-- End of progress-element -->

CSS

.progress {
    height: 1px;
    background: none;
    box-shadow: none;
}

.progress-bar {
    background: black;
}

.progress-element {
    text-align: left;
}

JS

 $(".progress-element").each(function() {
      var progressBar = $(".progress-bar");
      progressBar.each(function(indx){
          $(this).css("width", $(this).attr("aria-valuenow") + "%");
      });
  });

重要

如果你想在你进入视口(viewport)时触发条形图，我打赌你必须使用这个 http://imakewebthings.com/waypoints/

只需使用这段代码

JS

/*---------------------------------------------- 
                PROGRESS BARS
------------------------------------------------*/
  $(".progress-element").each(function() {
      $(this).waypoint(function() {
      var progressBar = $(".progress-bar");
      progressBar.each(function(indx){
          $(this).css("width", $(this).attr("aria-valuenow") + "%");
      });
  }, {
      triggerOnce: true,
      offset: 'bottom-in-view'
    });
   });

在此之前不要忘记包含最新的 jquery