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将在启动动画时将其切换为可见.
小智 8
迟到的反应然而这仍然可以帮助其他人.
如果在添加最新版本后WOW.js仍然无法正常工作,或者添加<!DOCTYPE html>问题可能是由于滚动(或更具体地说是视口)中的冲突.
在我的情况下,问题是在使用以下内容时在我的CSS中引起的:
html, body {height:100%; width:100%; overflow:hidden}
通过正确地移除高度和宽度,我能够解决问题,因为Wow.js随后能够注意到元素何时进入视口并更改元素可见性.