滾動上的Javascript/CSS動畫

Question

我正在個人網站上工作並遇到問題。我使用這個JavaScript的元素映入眼簾激活CSS動畫：

function isElementInViewport(elem) { 
    var $elem = $(elem); 

    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); 
    var viewportTop = $(scrollElem).scrollTop(); 
    var viewportBottom = viewportTop + $(window).height(); 

    var elemTop = Math.round($elem.offset().top); 
    var elemBottom = elemTop + $elem.height(); 

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop)); 
} 

function checkAnimation() { 
    var $elem = $('.slideUp'); 

    if ($elem.hasClass('start')) return; 

    if (isElementInViewport($elem)) { 
     // Start the animation 
     $elem.addClass('start'); 
    } 
} 

下面是HTML：

<img src="analyze.png" width="343" height="196" alt="Analyze" class="slideUp"> 

，這裏是我的CSS：

.slideUp.start { 
    animation-name: slideUp; 
    -webkit-animation-name: slideUp;  

    animation-duration: 1s; 
    -webkit-animation-duration: 1s; 

    animation-timing-function: ease;  
    -webkit-animation-timing-function: ease; 

    visibility: visible !important;   
} 

@keyframes slideUp { 
    0% { 
     transform: translateY(100%); 
    } 
    50%{ 
     transform: translateY(-8%); 
    } 
    65%{ 
     transform: translateY(4%); 
    } 
    80%{ 
     transform: translateY(-4%); 
    } 
    95%{ 
     transform: translateY(2%); 
    }   
    100% { 
     transform: translateY(0%); 
    } 
} 

@-webkit-keyframes slideUp { 
    0% { 
     -webkit-transform: translateY(100%); 
    } 
    50%{ 
     -webkit-transform: translateY(-8%); 
    } 
    65%{ 
     -webkit-transform: translateY(4%); 
    } 
    80%{ 
     -webkit-transform: translateY(-4%); 
    } 
    95%{ 
     -webkit-transform: translateY(2%); 
    }   
    100% { 
     -webkit-transform: translateY(0%); 
    } 
} 

所以我可以得到這個工作的一個元素。但是，如果我將這個類添加到五個元素中，一旦查看第一個元素，所有五個元素都將開始動畫。什麼是最好的方法，以便每個元素都使用相同的類和相同的JS腳本，但每個元素在進入視圖時都會進行動畫處理？我嘗試了一些東西，但他們似乎不工作。有什麼建議麼？謝謝！

Answer 1

編輯：添加DEMO

首先，創建，檢查哪個元件是在視口和需要被動畫的功能。

事情是這樣的：

function checkAnimation() { 
     var $elems = document.getElementsByClassName("slideUp"); 
     for(var i = 0; i < $elems.length; i++){ 
      if ($('.slideUp').eq(i).hasClass('start')) return; 

      if (isElementInViewport($('.slideUp').eq(i))) { 
      // Start the animation 
      $('.slideUp').eq(i).removeClass('slideUp').addClass('start'); 
      }   
     } 
    } 

然後，您可以使用jQuery .scroll（）事件處理函數觸發功能。

事情是這樣的：

$(window).scroll(function() { 
    checkAnimation(); 
}); 

最後，變化：

var $elem = $(elem); 

在function isElementInViewport(elem)到：

var $elem = elem; 

，因爲我們已經通過選定的元素。

WORKING DEMO