滚动上的动画技能栏答案

【问题标题】：Animated skillbars on scroll滚动上的动画技能栏
【发布时间】：2017-08-08 14:11:47
【问题描述】：

在我的应用程序中，我有技能栏，当网站加载并且一切似乎都正常工作时，这些栏会显示动画。当我滚动到技能栏时，我想让它动画化。我正在使用库 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>

【问题讨论】：

标签： javascript jquery css ruby-on-rails animation

【解决方案1】：

你可以只用纯 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/
滚动到元素时动画开始。

【讨论】：