Animate.css是否支持滚动触发动画？有无官方内置实现方案

• Animate.css本身没有内置滚动触发动画的功能，它只是纯CSS动画库，仅提供各类动画样式类，不包含滚动检测、触发时机控制这类JavaScript交互逻辑。

解决方案 #

1. 手写简单JS实现滚动触发 #

你可以用原生JavaScript监听滚动事件，结合元素视口检测逻辑来触发动画。示例代码如下：

<main class="animate__animated" style="opacity: 0;">
  <!-- 你的内容 -->
</main>

<script>
// 判断元素是否进入视口的函数
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top <= window.innerHeight &&
    rect.bottom >= 0
  );
}

// 监听滚动事件
window.addEventListener('scroll', () => {
  const mainEl = document.querySelector('main');
  if (isInViewport(mainEl) && !mainEl.classList.contains('animate__fadeInLeft')) {
    mainEl.style.opacity = 1;
    mainEl.classList.add('animate__fadeInLeft');
  }
});

// 页面加载时先检查一次
window.addEventListener('load', () => {
  const mainEl = document.querySelector('main');
  if (isInViewport(mainEl)) {
    mainEl.style.opacity = 1;
    mainEl.classList.add('animate__fadeInLeft');
  }
});
</script>

2. 使用现代替代库 #

如果不想手写代码，可以选择维护活跃的轻量库，比如AOS，它专门用于滚动触发动画，和Animate.css兼容性很好，配置简单。或者直接用原生的Intersection Observer API，这是浏览器原生支持的视口检测API，性能更优。

注意点 #

你当前的代码是直接给元素加上了动画类，页面加载时就会执行动画。要实现滚动触发，需要初始时只保留animate__animated基础类，等元素进入视口时再添加具体的动画类（比如animate__fadeInLeft）。

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