使用animate.css时动画在页面加载前提前触发该如何解决？

核心逻辑 #

默认不给元素绑定animate.css的动画类，等页面资源完全加载、或预加载器执行完成后，再动态注入动画类，从根源避免动画提前触发，完全不需要依赖固定延迟属性。

具体实现步骤 #

1. 先定义自定义初始类，给需要动画的元素默认添加该类

/* 仅用于标识待触发动画的元素，也可以根据需求加初始隐藏状态避免闪烁 */
.animate-wait {
  opacity: 0;
}

2. 绑定加载完成事件触发动画
   你可以根据需求二选一触发时机，有预加载器优先选第二种：

• 方案1：基于浏览器原生的全资源加载事件触发

// window.load会等待页面所有DOM、图片、字体、静态资源全部加载完成后执行
window.addEventListener('load', () => {
  document.querySelectorAll('.animate-wait').forEach(el => {
    // 移除初始隐藏类，添加animate.css的动画规则类
    el.classList.remove('animate-wait');
    el.classList.add('animate__animated', 'animate__fadeInUp'); // 替换为你需要的动画名
  });
});

• 方案2：基于现有预加载器的完成回调触发（更推荐）
  如果你的预加载器已经封装了加载完成的回调钩子，直接把动画触发逻辑写在回调内即可，能和预加载器的退出时机完全匹配：

// 示例：替换为你实际的预加载器完成回调写法
yourPreloader.on('complete', () => {
  document.querySelectorAll('.animate-wait').forEach(el => {
    el.classList.remove('animate-wait');
    el.classList.add('animate__animated', 'animate__fadeInUp');
    // 可根据需求添加和预加载器退出动画的时间差，比如用setTimeout包裹逻辑延迟100ms执行
  });
});

额外适配场景 #

如果你的动画是滚动到可视区域才触发的非首屏动画，可以配合IntersectionObserver实现，不需要监听scroll事件，性能更好：

window.addEventListener('load', () => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if(entry.isIntersecting) {
        const el = entry.target;
        el.classList.remove('animate-wait');
        el.classList.add('animate__animated', 'animate__fadeInUp');
        observer.unobserve(el); // 触发一次后取消监听
      }
    })
  }, { threshold: 0.1 }); // 元素进入可视区域10%时触发

  document.querySelectorAll('.animate-wait').forEach(el => observer.observe(el));
});

内容的提问来源于stack exchange，提问作者Dhruv