Question

在我的应用程序中，我有技能栏，当网站加载并且一切似乎都有效时，它们会被动画化。当我滚动到技能栏时，我想让它成为动画。我正在使用库animate.css。

我该如何使这项工作？我错过了什么？

skill.js

SELECT 
a.locationid as locationIdA, a.qty as qtryA,
b.locationid as locationIdB, b.qty as qtryB,
c.locationid as locationIdC, c.qty as qtryC
FROM
a
INNER JOIN b
ON
a.locationid=b.locationid 
INNER JOIN c
ON
a.locationid=c.locationid

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

skill.js

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

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

})(jQuery);

view.html.erb

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

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

})(jQuery);

Answer 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/
滚动到元素时动画开始。

滚动动画技能栏

1 个答案: