使用预加载器延迟 css 动画？

Question

我目前有一个网站在首页 (https://daneden.github.io/animate.css/) 上使用 Animate.css。目前的工作方式是用户一打开网站就开始播放动画，但这会导致动画 "lag"。我想要的是让它等到整个页面加载完毕，然后 css 动画开始执行它们的操作，从而使体验更加流畅。

我研究了几个基于 js 的预加载器，尝试了一些但它不会延迟 css 动画。页面加载完成后，css 动画已经完成。是我做错了什么，还是 JS 预加载器不是正确的方法？

Answer 1

您必须使用 javascript and/or jquery 将具有动画的 css class 动态添加到页面后的所需元素已加载。我们可以通过 jquery.

中的 $document.ready 事件来做到这一点

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

如果您查看源代码，他在 main site 上就是这样做的。

Answer 2

上述方法对我不起作用。

由于好的预加载器会等到所有页面元素（包括图像）都显示完毕，所以我会 wait until then...

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