当元素在视口中时触发css动画答案

【问题标题】：trigger css animation when element in viewport当元素在视口中时触发css动画
【发布时间】：2020-01-28 05:16:24
【问题描述】：

非常感谢你的眼睛。

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

我在我认为应该可以工作的状态下修改了我的代码：

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

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

});

任何想法都会非常感激，我被官方难住了！

【问题讨论】：

你没有在你的小提琴中包含 jquery.. 只需包含它就可以了..

标签： jquery css animation css-animations

【解决方案1】：

想通了！

我添加复合类触发动画后：

.for-anim.playit.scroll_long{ 
 animation: 5600ms cubic-bezier(0.694, 0, 0.335, 1) 1000ms normal forwards 1 running scrollScreen;
}

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

再次感谢！

【讨论】：