javascript - 滚动动画技能栏

在我的应用程序中，我具有技能栏，这些技能栏在网站加载时会显示动画，并且一切正常。当我滚动到技能栏时，我想使其具有动画效果。我正在使用库animate.css。

我该如何进行这项工作？我想念什么？

skill.js

;(function($) {
  "use strict";

  //skillbars
  $('.progress-back').each(function() {
      $(this).find(
          '.progress-full-line-over').css({
          'width': $(this).attr(
              'data-percent')
      });
  });

})(jQuery);

我尝试这样做，但这似乎不起作用：

skill.js

;(function($) {
  "use strict";

    //skillbars
    $('.progress-back').each(window.onscroll =function() {
        $(this).find(
            '.progress-full-line-over').css({
            'width': $(this).attr(
                'data-percent')
        });
    });

})(jQuery);

view.html.erb

<div class="progress-wrapper">
  <div class="progress-name">html & php</div>
  <div class="progress-percen">97%</div>
  <div class="progress-back" data-percent="97%">
    <div>
      <div class="progress-full-line-over animated slideInLeft"></div>
    </div>
  </div>
</div>

<div class="progress-wrapper">
  <div class="progress-name">wordpress</div>
  <div class="progress-percen">80%</div>
  <div class="progress-back" data-percent="80%">
    <div>
      <div class="progress-full-line-over animated slideInLeft"></div>
    </div>
  </div>
</div>

最佳答案

您只能使用纯CSS来实现。

<div class="progress">
  <div class="progress__box">
    <div class="progress__bar"></div>
  </div>
</div>

样式

.progress {
  border: 1px solid #000;
  width: 100%;
}
.progress__box {
    width: 70%; /* bar value */
}
.progress__bar {
    width: 100%;
    height: 30px;
    background: green;
    -webkit-animation-name: progress; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
    animation-name: progress;
    animation-duration: 4s;
    animation-iteration-count: 1;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes progress {
    0%   {width: 0%;}
    100% {width: 100%;}
}

/* Standard syntax */
@keyframes progress {
    0%   {width: 0%;}
    100% {width: 100%;}
}

https://jsfiddle.net/sh14/47xethse/
滚动到元素时，动画开始。