wow.js 发生在页面加载而不是滚动时答案

【问题标题】：wow.js happens on page load and not on scrollwow.js 发生在页面加载而不是滚动时
【发布时间】：2014-05-08 01:10:13
【问题描述】：

我正在使用wow.js，它工作正常，除了动画都在页面加载后立即发生，而不是在滚动到时发生。我遵循了文档，但无法弄清楚。

页面上没有 JS 错误。我包括了 animate.min.css 和 wow.js

在正文中：

<img src="images/philosophy.png" alt="Philosophy" id="philosophy-img" class="icon wow bounceInUp">

在页脚中：

<script>
    new WOW().init();
</script>

那么如何使用 wow.js 让动画在滚动到特定 div 时发生？

【问题讨论】：

有问题吗？
@Soren 是的。最后一段。如何使动画仅在滚动而不是页面加载时发生。
你有没有得到这个工作？我也遇到了这个问题。

标签： javascript html css

【解决方案1】：

这是我通过closed Github Issue: 找到的解决方案，您可以将其添加到您的 CSS：

.wow {
   visibility: hidden;
}

WOW 将在开始动画时将其切换为可见。

【讨论】：

这在我的情况下对我有用。在页面加载时，图像会短暂出现，然后在页面最终加载时隐藏。谢谢
我注意到我也遇到了这个问题，并且它使页面看起来像一个非常棒的图书馆的业余'ish。上面的解决方案对我有用。

【解决方案2】：

响应较晚，但这仍然可能对其他人有所帮助。

如果在添加最新版本或添加 <!DOCTYPE html> 后 WOW.js 仍然无法正常工作，则问题可能是由于滚动（或更具体地说是视口）中的冲突。

在我的情况下，问题是在使用以下内容时在我的 CSS 中引起的：

html, body {height:100%; width:100%; overflow:hidden}

通过适当地移除高度和宽度，我能够解决问题，因为 Wow.js 能够注意到元素何时进入视口并改变元素的可见性。

【讨论】：

是的，我遇到了同样的问题（和解决方案），包装
元素和 max-height 属性
完美，有助于找到问题。溢出-x 属性导致了这个问题。

【解决方案3】：

有同样的问题。正在使用 class="wow bounceInUp"

然后我尝试了 class="wow bounceInUp animated"

成功了

编辑：最后，它没有用。它一开始有效，但后来停止了。更大的谜团：S

【讨论】：

【解决方案4】：

我遇到了同样的问题，我只是想通了。问题是页脚中的<script> 不完整，或者至少它对我不起作用。

遇到这个问题的人可以试试这段代码，就在</body>标签之前：

<script>
wow = new WOW( {
    boxClass:     'wow',
    animateClass: 'animated',
    offset:       100
    }
);

wow.init();
</script>

【讨论】：

【解决方案5】：

我今天遇到了类似的问题，因为我使用的是固定的导航栏宽度，高度为 160 像素，内容在我看到之前就加载了。

我通过在 WOW 初始化中添加偏移来解决它：

new WOW({offset: 160 }).init()

希望对您有所帮助。

【讨论】：

这个答案对我有帮助，但有一些错误。也就是说，如果想将偏移量设置为 160px，160px 在您的代码中必须只有 160。谢谢

【解决方案6】：

对于 DesignofKA 提出的答案，由于包装 div 中的固定高度属性，我遇到了同样的问题。

我只是在 window.onload 事件期间初始化 wow 来解决 wow 问题。

我的代码是：

$(window).load(function() {
    var wow = new WOW({
        boxClass: 'wow',
        animateClass: 'animated',
        offset: 0,
        mobile: true,
        live: true
    });
    wow.init();
});

【讨论】：

【解决方案7】：

如果我知道您使用的浏览器和 WOW.js 版本会很有帮助。

另外，请尝试latest version，我们已经进行了一些更改以解决 Firefox 的问题，这也可能解决您的问题。特别是在0.1.9。

如果您的问题仍然存在，请report the bug，并尝试提供示例页面并告诉我们您使用的是哪种浏览器。

【讨论】：

【解决方案8】：

我遇到了类似的问题。我刚刚忘记添加了

<!DOCTYPE html>

这里的答案有所帮助 - wow.js only works when scrolling up

【讨论】：

【解决方案9】：

根据@DesignofKA 帖子。对我来说，它与这行代码冲突：

 -webkit-overflow-scrolling: touch;

希望这会有所帮助。

【讨论】：