如何在页面加载时触发animate.css

时间:2014-03-01 09:46:01

标签: javascript jquery css animation animate.css

我正在使用Dan Eden的animate.css为我的幻灯片元素制作动画。这是我在页面加载时触发动画的方式:

CSS:

body.loading .animated {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  -webkit-animation-duration: 60s !important;
  animation-duration: 60s !important;
  -webkit-animation-delay: 60s !important;
  animation-delay: 60s !important;
}

首先,我将所有动画延迟60秒。这应该足以加载任何网站。 我在页面加载时从正文中删除.loading,以便使用默认的 .animated 延迟和1s的持续时间。

JS

jQuery(window).load(function() {
  jQuery("body").removeClass("loading");
});

在我几天前更新Google Chrome之前,这就像一个魅力。它在所有其他浏览器中仍然可以正常工作。只是Chrome让我头疼。看起来60s延迟仍然被使用,尽管.loading的等级已从身体中移除。

我想知道是否有人在页面加载时触发animate.css的工作解决方案。

0 个答案:

没有答案