触发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。

再次感谢！