使用頁面加載器后，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將觸發所有動畫。即，當您將$（'。MainWrapper'）。hide（）（無顯示）更改為$（'。MainWrapper'）。show（）（顯示塊）時。

要使用“加載程序”並仍保持滾動顯示動畫的功能，只需在顯示頁面內容后在.load函數內部啟動WOW.js。

您的js代碼應如下所示

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

希望有幫助！