Question

非常感谢你的眼睛。

Javascript旨在延迟css动画，直到用户在其视口中包含该元素。运行它时，向下滚动以查看此元素。如果你移动得足够快，你会看到它滚动，但它不会等待。

我在我相信它应该工作的状态下对我的代码做了一个小提琴：

我从这个网站获得了代码：

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

昨天，我得到了它，但只有当我给出TWO类标签时。所以它看起来像

<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

想出来！

添加复合类后触发动画： .for-anim.playit.scroll_long：animation：5600ms cubic-bezier（0.694,0,0.335,1）1000ms正常转发1个正在运行的scrollScreen;}

我忘了删除其他样式.scroll_long。

再次感谢！

在视口中的元素时触发css动画

1 个答案: