javascript - 使用页面加载器后 Wow.js 不工作

Question

我使用 wow.js 向我的内容添加一些动画来赚取一些时间，而不是在 .appear() 上使用我自己的动画

一切都很好，直到我不得不使用某种加载器来隐藏整个包装器，直到加载窗口。这样做之后，当我滚动页面时，动画已经被触发。 (这是一个视差页面)。这是某种错误，还是我搞砸了？

这是 html 和 javascript:

<img src="loading.gif" alt="" class="loading"/>
<div class="MainWrapper" style="display: none">

和

$('.MainWrapper').hide();
    new WOW().init();
$(window).load(function() {
    $('.loading').hide(); 
    $('.MainWrapper').show(); 
});

Answer 1

当您将显示切换为 block 时，Wow.js 将触发 ALL 动画。即当您将 $('.MainWrapper').hide()(不显示)更改为 $('.MainWrapper ').show()(显示 block ).

要使用“加载器”并仍然保持滚动显示动画的功能，只需在显示页面内容后在 .load 函数内启动 WOW.js。

你的 js 代码应该是这样的

$('.MainWrapper').hide();
$(window).load(function() {
   $('.loading').hide(); 
   $('.MainWrapper').show();
   new WOW().init();
});

希望对您有所帮助!