如何用单个IntersectionObserver函数实现多ID元素的视口入场效果？

问题说明 #

需要为三个不同ID（#fadeAppear、#slideAppear、#zoomAppear）的元素实现进入视口时的差异化入场效果，要求用单个IntersectionObserver回调函数完成，无需编写多个独立函数。但现有代码仅第一个ID元素生效，单独绑定ID的尝试也失败。

错误原因分析 #

1. 第一种写法中，document.querySelector('#fadeAppear, #slideAppear, #zoomAppear')只会返回第一个匹配的DOM元素，所以IntersectionObserver只监听了#fadeAppear，另外两个元素未被观察。
2. 第二种写法中，document.getElementById()的参数错误地添加了#前缀——该方法接收的是纯ID字符串，不需要加选择器符号，导致获取到的元素为null，调用observe()自然无效。

修正后的完整代码 #

HTML（无需修改） #

<div id="wrap">
  <div id="fadeAppear">Fade Appear</div>
  <div id="slideAppear">Slide Appear</div>
  <div id="zoomAppear">Zoom Appear</div>
 </div>

CSS（无需修改） #

#wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#fadeAppear {
    background: red;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

#slideAppear {
    background: green;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

#zoomAppear {
     background: orange;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}

#fadeAppear.inview,
#slideAppear.inview,
#zoomAppear.inview {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

JavaScript（两种有效写法） #

写法一：批量获取元素并循环监听

document.addEventListener('DOMContentLoaded', function() {
  // 用querySelectorAll获取所有目标元素，返回NodeList
  const appearElements = document.querySelectorAll('#fadeAppear, #slideAppear, #zoomAppear');
  
  const cb = function(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('inview');
      } else {
        entry.target.classList.remove('inview');
      }
    });
  };

  const io = new IntersectionObserver(cb);
  // 循环为每个元素添加监听
  appearElements.forEach(element => io.observe(element));
});

写法二：单独正确获取元素并监听

document.addEventListener('DOMContentLoaded', function() {
  function handleIntersection(entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add("inview");
      } else {
        entry.target.classList.remove("inview");
      }
    });
  }

  const observer = new IntersectionObserver(handleIntersection);

  // getElementById直接传ID名，不要加#
  const element1 = document.getElementById("fadeAppear");
  const element2 = document.getElementById("slideAppear");
  const element3 = document.getElementById("zoomAppear");

  observer.observe(element1);
  observer.observe(element2);
  observer.observe(element3);
});

效果说明 #

两种写法都能实现：当元素进入视口时，自动添加inview类，触发对应的CSS过渡动画；离开视口时移除该类，恢复初始状态。单个回调函数即可处理所有元素的交叉状态判断，满足需求。

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