使用預加載器延遲 css 動畫？

Question

我目前有一個在首頁上使用 Animate.css 的網站（ https://daneden.github.io/animate.css/ ）。 目前的工作原理是，只要用戶打開網站，動畫就會立即啟動，但這會導致動畫“滯后”。 我想要的是讓它等到整個頁面加載進來，然后 css 動畫開始做他們的事情，從而使體驗更加流暢。

我研究了幾個基於 js 的預加載器，嘗試了一些，但它不會延遲 css 動畫。 一旦頁面加載完成，css動畫就已經完成了。 我做錯了什么，還是 JS 預加載器不是正確的方法？

Answer 1

在頁面加載后，您必須使用 javascript 和/或 jquery 將具有動畫的 css 類動態添加到所需元素。 我們可以使用 jquery 中的 $document.ready 事件來做到這一點。

$(document).ready(function(){
     $('css selector').addClass('class-that-has-animation-binding').
});

如果您查看源代碼，這就是他在主站點上的做法。

Answer 2

上述方法對我不起作用。

由於一個好的預加載器會等到所有頁面元素（包括圖像）都顯示出來，我會等到那時......

$(window).load(function() {
  $('css selector').addClass('class-that-has-animation-binding').
});