觸發css動畫時，在視口元素

Question

非常感謝您的眼睛。

Javascript的目的是延遲css動畫，直到用戶在其視口中具有元素。當你運行它時，向下滾動查看這個元素。如果移動速度足夠快，您會看到滾動，但不會等待。

https://jsfiddle.net/3jvvvf4s/

我的代碼從該網站：

我在，我相信它應該工作的狀態，我和代碼小提琴

http://www.justinaguilar.com/animations/index.html#how

昨天，我得到它的工作，但只有當我給了兩個類標籤。所以它看起來像

<img class=「lazy」 src=「png」 class=「scroll_long」> 

組合類或轉動'懶'信息一個ID不起作用。

我也試過這個代碼，我從別的地方得到，用幾乎相同的結果：

$(window).scroll(function() { 
$('.lazy').each(function() { 
    var imagePos = $(this).offset().top; 
    var imageHeight = $(this).height(); 
    var topOfWindow = $(window).scrollTop(); 

    if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) { 
     $(this).addClass("scroll_long"); 
    } else { 
     $(this).removeClass("scroll_long"); 
    } 
}); 

}）;

任何想法都會被讚賞，我正式難住！

Answer 1

想通了！

後我加入化合物類，以觸發動畫： 。對於-anim.playit.scroll_long：動畫：5600ms立方貝塞爾（0.694，0，0.335，1）1000毫秒正常運行scrollScreen轉發1;}

我忘記了刪除其他風格.scroll_long。

再次感謝！