Javascript 仅在滚动时播放CSS动画

我有一个页面上的内容和一半，通过我的技能栏是动画与CSS。我只想在技能栏处于视图中时播放动画

我尝试使用js，当我使用一个技能条时，它就起作用了。如图所示：

但当我添加更多的酒吧，它完全停止工作。就像这里：

我知道我必须在js代码中添加一些东西，但我不确定到底要添加什么

function isElementInViewport(){
            var scrollTop = $(window).scrollTop();
            var viewportHeight = $(window).height();
            $('.skiller #skill:not(.html5)').each(function(){
                var top = $(this).offset().top;
                console.log(top);
                console.log(scrollTop + viewportHeight);
                if(scrollTop + viewportHeight >= top ){
                    $(this).find('.expand').addClass('html5');
                    console.log(true);
                }else{
                    console.log(false);
                }
            });
        }

$(window).scroll(isElementInViewport);

如果有人能告诉我正确的方向

---

提前谢谢你们

代码的问题在于html，所有技能都已经有了动画，因此新动画将无法运行。我试着把它去掉

-moz-animation: css3 2s ease-out;   -webkit-animation: css3 2s ease-out; 

从css3类，然后css3技能有一个动画。因此，您可以将名为animate的类添加到元素中，然后在css中从技能类中删除动画，并为每个技能类添加以下内容：

.jquery.animate      {-moz-animation: jquery 2s ease-out;   -webkit-animation: jquery 2s ease-out;      }

---

这应该行得通，因为在你的5小节版本中，你已经直接添加了css类，而不是通过javascript编程。这意味着动画会立即发生

<div class="skiller col">
    <ul id="skill">
        <li><span class="expand html5"><small>%70</small></span><em>HTML
        5</em></li>

        <li><span class="expand css3"><small>%90</small></span><em>CSS
        3</em></li>

        <li><span class=
        "expand jquery"><small>%50</small></span><em>jQuery</em></li>

        <li><span class=
        "expand photoshop"><small>%10</small></span><em>Photoshop</em></li>

        <li><span class=
        "expand dreamweaver"><small>%100</small></span><em>Dreamweaver</em></li>
    </ul>
</div>

$（窗口）。滚动（IsElementViewPort）

删除在HTML中添加的类后，还需要更改HTML扩展类，如下所示：（注意：这是一个糟糕的实现，但请将其作为基础来大大改进）

%70HTML
五,
%90CSS
三,
%50jQuery
%10 Photoshop
%100Dreamweaver

看看这把小提琴，它正在工作：

---

重要提示：理想情况下，您希望使代码可重用且可扩展。我的“修复”是一种非常老练的方法，没有采用最佳实践。如果你不再使用它，只需要尽快完成就可以了，但我建议你考虑以一种更加干燥的方式重建它。

我尝试过这样做，但它们都像最后一个条一样扩展到100%？（我对js有点陌生，所以对我来说是赤裸裸的）：/Hi-Sweep。请看我编辑的原创文章。它不是完美的，它会将它们全部展开，但前提是您向下滚动到它们。确保首先从HTML中删除附加类。我从HTML中删除了这些类，并添加了更新的js代码，但它仍然在做同样的事情。所有的条都扩展到了%100。我添加了一个新的小提琴链接，让你看看它的工作情况。哦，你认为问题是因为他们都有相同的类“扩展”，这就是为什么它不起作用？

function isElementInViewport(){
        var scrollTop = $(window).scrollTop();
        var viewportHeight = $(window).height();
        $('.skiller #skill:not(.html5)').each(function(){
            var top = $(this).offset().top;
            console.log(top);
            console.log(scrollTop + viewportHeight);
            if(scrollTop + viewportHeight >= top ){
                $(this).find('.expand').addClass('html5');
                $(this).find('.expand1').addClass('css3');
                $(this).find('.expand2').addClass('jquery');
                $(this).find('.expand3').addClass('photoshop');
                $(this).find('.expand4').addClass('dreamweaver');
                console.log(true);
            }else{
                console.log(false);
            }
        });
    }

<div class="skiller col">
    <ul id="skill">
        <li><span class="expand"><small>%70</small></span><em>HTML
        5</em></li>

        <li><span class="expand expand1"><small>%90</small></span><em>CSS
        3</em></li>

        <li><span class=
        "expand expand2"><small>%50</small></span><em>jQuery</em></li>

        <li><span class=
        "expand expand3"><small>%10</small></span><em>Photoshop</em></li>

        <li><span class=
        "expand expand4"><small>%100</small></span><em>Dreamweaver</em></li>
    </ul>
</div>