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") + "%");
      });
  });

重要

如果您希望在输入视口时触发条形图，我打赌您必须使用此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

Answer 2

您是否考虑过使用$ .onScreen插件。你可以找到它Here。这是获取jQuery onScreen的最简单，最有效的方法。

$('elements').onScreen({
   container: window,
   direction: 'vertical',
   doIn: function() {
     // Do something to the matched elements as they come in
   },
   doOut: function() {
     // Do something to the matched elements as they get off scren
   },
   tolerance: 0,
   throttle: 50,
   toggleClass: 'onScreen',
   lazyAttr: null,
   lazyPlaceholder: 'someImage.jpg',
   debug: false
});

Answer 3

如果您不想使用Waypoint，这是一个解决方案

void print_triangle(int n)
{
    if (n < 1)
        return;

    int m = n * n;
    for (int i = 0, e = n - 1, f = 0; i < m; ++i)
    {
        if ( i >= f )
           putchar('*');
        if ( i != e )
            putchar(' ');
        else
        {
            putchar('\n');
            f += n + 1;
            e += n;
        }
    }
}

Answer 4

就我而言，此代码运行良好。

在此之前包含最新的 jquery。

html

<!-- skill bar -->
        <div class="row pb-5">
          <!-- HTML/CSS -->
          <div class="col-lg-4">
            <h4>HTML/CSS</h4>
            <div class="progress rounded-0 mb-4">
              <div
                class="progress-bar barColor"
                style="width: 80%"
                aria-valuenow="80"
              ></div>
            </div>
          </div>

          <!-- JavaScript -->
          <div class="col-lg-4">
            <h4>JAVASCRIPT</h4>
            <div class="progress rounded-0 mb-4">
              <div
                class="progress-bar barColor"
                style="width: 60%"
                aria-valuenow="60"
              ></div>
            </div>
          </div>

          <!-- Angular -->
          <div class="col-lg-4">
            <h4>ANGULAR</h4>
            <div class="progress rounded-0 mb-4">
              <div
                class="progress-bar barColor"
                style="width: 60%"
                aria-valuenow="60"
              ></div>
            </div>
          </div>

          <!-- UI Design -->
          <div class="col-lg-4">
            <h4>UX/UI</h4>
            <div class="progress rounded-0 mb-4">
              <div
                class="progress-bar barColor"
                style="width: 45%"
                aria-valuenow="45"
              ></div>
            </div>
          </div>

          <!-- GIT -->
          <div class="col-lg-4">
            <h4>GIT/GITHUB</h4>
            <div class="progress rounded-0 mb-4">
              <div
                class="progress-bar barColor"
                style="width: 40%"
                aria-valuenow="40"
              ></div>
            </div>
          </div>

          <!-- PHP/MYSQL -->
          <div class="col-lg-4">
            <h4>PHP/MYSQL</h4>
            <div class="progress rounded-0 mb-4">
              <div
                class="progress-bar barColor"
                style="width: 50%"
                aria-valuenow="50"
              ></div>
            </div>
          </div>
        </div>

css

.animateBar {
  animation-name: animateBar;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.9s;
}
@keyframes animateBar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

javascript

$(document).ready(function () {
  var targetParent = $(".progress");
  targetParent.each(function () {
    //required variables
    var target = $(this).children();
    var offsetTop = $(this).offset().top;
    var winHeight = $(window).height();
    // var data_width = target.attr("aria-valuenow") + "%";

    //animation starts
    if (winHeight > offsetTop) {
      target.addClass("animateBar");
    }

    //animation with scroll
    $(window).scroll(function () {
      var scrollBar = $(this).scrollTop();
      var animateStart = offsetTop - winHeight;
      if (scrollBar > animateStart) {
        target.addClass("animateBar");
      }
    });
  });
});

如何在视图中为bootstrap进度条设置动画？

4 个答案: