Intersection Observer如何为所有同class元素添加类触发视口动画

问题原因 #

你当前代码仅对第一个元素生效的核心问题是：document.querySelector()方法只会返回文档中第一个匹配指定选择器的元素，所以你只给第一个.animate__animated元素注册了监听，其余同类元素从未被加入Intersection Observer的监听队列，自然不会触发后续的动画逻辑。

Intersection Observer完全可以实现多元素的视口监听需求，只需要将所有匹配的元素逐一注册监听即可。

修改后的完整JS代码 #

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-running');
      // 可选优化：动画触发后取消监听，避免重复计算消耗性能
      observer.unobserve(entry.target);
    }
  });
});

// 获取所有带.animate__animated类的元素，逐一注册监听
document.querySelectorAll('.animate__animated').forEach(el => {
  observer.observe(el);
});

补充说明 #

你现有的CSS和HTML代码无需修改，替换上述JS代码即可实现所有带.animate__animated类的元素进入视口时自动触发动画的效果。如果你的页面后续会动态插入带.animate__animated类的新元素，只需要在新元素插入DOM后，手动调用observer.observe(新元素)即可为新元素注册监听。

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