元素在视口中时的动画答案

【问题标题】：Animating elements when they are in the viewport元素在视口中时的动画
【发布时间】：2016-03-20 03:21:51
【问题描述】：

正如目前在许多网站上看到的那样，当元素进入视口或距离视口 100px 等时，我想对元素做一些事情。

我一直在寻找年龄，但到目前为止没有任何工作。

我有一个 500 像素高和 100% 宽的元素列表。我对动画等以及我将如何处理它们没问题，只需要一些帮助来触发它们，然后当它们进入视野时。

我的目标是给元素一个动画元素类，然后能够使用该类来检查它是否在视图中。

伪代码：

$(window).on('scroll', function() {
    if (element is in the viewport) {
        $(this).doSomething();
    }
});

我似乎很懒，但我已经找了太久没有成功。

任何先前的尝试总是在持续滚动时触发，所以即使元素不在视口中并且我正在设置控制台日志，当滚动一点点时我也会有 100 条日志。

【问题讨论】：

标签： jquery css animation

【解决方案1】：

我最近为另一个答案创建了一个类似的解决方案。

JS 跟踪窗口的滚动，并将窗口滚动的距离与offset().top（跟踪该元素距页面顶部的距离）进行比较。如果窗口滚动在元素顶部的 -300px 范围内，它会从左侧淡入/动画动画。

JS：

var $win = $(window);
var $stat = $('.animation-element'); // Change this to affect your desired element.

$win.on('scroll', function () {
    var scrollTop = $win.scrollTop();

    $stat.each(function () {
        var $self = $(this);
        var prev=$self.offset();
        console.log(scrollTop);
        console.log(prev.top);
        if ( (scrollTop - prev.top) > -300) {
          $self.css('opacity', '1').addClass('animated fadeInLeft ');
        } else {
          console.log('n');
        }

    });

}).scroll();

这是正常工作的 JSfiddle — 向下滚动以查看元素滑入。 https://jsfiddle.net/wigster/5dbt7ft3/1/

【讨论】：

实际上，我已经为我的所有列表元素提供了一个“动画元素”类，并且在使用您的代码时，它会在页面加载时触发 3 个事件。不是向下滚动一半等，而是重新加载页面？
我已经编辑了示例 jsfiddle 和代码，希望与您的问题更相关。请立即查看，让我知道可能是什么问题。