使用页面加载器后，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

当您将显示切换为阻止时，Wow.js将触发所有动画。即当您更改$（＆＃39; .MainWrapper＆＃39;）。hide（）（显示无）时$（＆＃39; .MainWrapper＆＃39;）。show（）（显示块）。

使用＆＃34;装载机＆＃34;并且在显示页面内容后，仍然保持在滚动时显示动画的功能只是在.load函数内启动WOW.js。

你的js代码看起来应该是这样的

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

希望有所帮助！