僅在滾動時播放CSS動畫

Question

我在頁面上有內容，而到一半時，我有使用CSS制作動畫的技能欄。 我只想查看技能條，然后播放動畫。

我嘗試使用js，當我使用一個技能欄時它就起作用了。 此處顯示： jsfiddle.net/pCgYe/6/

但是，當我添加更多欄時，它完全停止工作。 就像這里： jsfiddle.net/pCgYe/7/

我知道我必須在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);

如果有人可以指導我正確的方向。

預先謝謝你們！

Answer 1

代碼的問題在於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;      }

那應該工作

Answer 2

這是因為在您的5 bar版本中，您已經直接添加了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>

在每一行上展開后刪除類，然后像在一個欄式版本中一樣將它們添加到您的javascript中。 我正在上班，因此無法對此進行正確的版本處理，但請嘗試以下javascript：

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);
            }
        });
    }

$（window）.scroll（isElementInViewport）;

刪除您在HTML中添加的類之后，還需要更改HTML擴展類，如下所示：（注意：這是一個不好的實現，但請以此為基礎進行大量改進）。

<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>

看看這個小提琴在運行中的作用： http : //jsfiddle.net/pCgYe/9/

重要提示：理想情況下，您要使代碼可重用和擴展。 我的“修復”是一種非常駭人聽聞的方法，並且沒有采用最佳實踐。 如果您永遠不會再次使用它，而只需要盡快完成它，那是可以的，但是我建議您考慮以一種更加干燥的方式來重建它。