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

ste*_*iel 19 html javascript css

我正在使用wow.js,它工作正常,除了动画都是在页面加载后立即发生,而不是在滚动到它们时.我跟着文档,但无法弄明白.

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

在身体里:

<img src="images/philosophy.png" alt="Philosophy" id="philosophy-img" class="icon wow bounceInUp">
Run Code Online (Sandbox Code Playgroud)

并在页脚中:

<script>
    new WOW().init();
</script>
Run Code Online (Sandbox Code Playgroud)

那么如何在滚动到特定div时使用wow.js来实现动画?

G.M*_*art 18

这是我通过封闭的Github问题找到的解决方案:你可以将它添加到你的CSS:

.wow {
   visibility: hidden;
}
Run Code Online (Sandbox Code Playgroud)

然后WOW将在启动动画时将其切换为可见.

  • 在我的情况下,这对我有用.在页面加载时,图像会短暂出现,然后在页面最终加载后隐藏.谢谢 (2认同)

小智 8

迟到的反应然而这仍然可以帮助其他人.

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

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

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

通过正确地移除高度和宽度,我能够解决问题,因为Wow.js随后能够注意到元素何时进入视口并更改元素可见性.