使用预加载器延迟 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').
});