Question

我已经尝试了十几个库来实现这种效果，但我必须在某个地方犯错误。我目前正在使用此库： - zeusdeux/isInViewport。

在我的CSS中，我有一个名为.animated-element的样式，如下所示： -

.animation-element {
}
.in-view {
}

我有几个css元素在添加.in-view类时启动动画： -

.trans-1 {
  -webkit-transition: 2s;
  transition: 2s; 
}
.fade {
  opacity: 0;
}

.fade.in-view {
  opacity: 1;
}

在我的html中，我有div元素与这些类进行动画制作： -

<div class="fade trans-1 animation-element">
                <h2 class="medium-subheader-bold">Header</h2>
</div>

最后，javascript使用库检查元素是否在视口中，如果是，则向元素添加一个类。从而将.fade更改为.fade.in-view（不透明度0到1）： -

(function($) {
    $(document).ready(function() {
        $(window).scroll(function() {
            $('.animation-element').removeClass('in-view');
            $('.animation-element:in-viewport').addClass('in-view');
        });
    });
}(jQuery));

当我在浏览器中加载页面时，页面中的所有元素都会立即加载并设置动画。当我检查网页以检查视口中不可见的元素时，我可以看到它们在添加和删除视图中的类之间正在快速闪烁。我还尝试从上面的javascript中删除$('.animation-element').removeClass('in-view');行，但仍然会立即添加视图中的类，即使元素远离视口。

我已经尝试过使用多个库并继续遇到同样的问题，所以它必须是我实现它的方式，而不是库的错误。

我还应该说我使用Pug生成html，常规css，并通过node.js提供整个页面。

Answer 1

我终于找到了问题所在。我花了一整天的时间尝试在JSFiddle中重新创建它并修改不同的部分。最后是因为我没有将<!DOCTYPE html>放在html文档的顶部。其他一切工作都很疯狂，甚至是向上滚动时的动画，只是没有向下滚动，因为这一行。

JQuery检查元素何时在Viewport中

1 个答案: