React中Intersection Observer失效：滚动滑入动画不生效问题排查

你当前代码无报错但功能不生效，核心问题集中在ref绑定、Observer逻辑、选择器范围、CSS优先级这几个方面，具体如下：

问题分析 #

1. ref未绑定到目标容器
   你的myRef没有关联到包裹所有动画元素的父DOM节点，导致Intersection Observer没有监听正确的目标，自然无法触发交集状态变化。

2. Observer初始化逻辑错误
   第一个useEffect将isIntersecting作为依赖项，每次状态变化都会重新创建并绑定Observer，既造成冗余操作，还可能导致监听异常——Observer只需要初始化一次。

3. 类名移除的选择器范围过大
   离开视口时，你用querySelectorAll('div')移除slide-in类，会误操作所有div元素，而非仅目标动画元素，逻辑不精准。

4. CSS优先级冲突
   h1.registration-slide和div.registration-slide的优先级（元素选择器+类选择器）高于.slide-in（仅类选择器），导致添加slide-in后样式无法覆盖初始状态。

修复后的完整代码 #

JSX部分 #

import { useState, useRef, useEffect } from 'react';

const RegistrationSection = () => {
  const [isIntersecting, setIsIntersecting] = useState(false);
  // 绑定到包裹所有动画元素的父容器
  const sectionRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        setIsIntersecting(entry.isIntersecting);
      });
    }, {
      threshold: 0.1 // 可选：调整触发阈值，元素10%可见时触发动画
    });

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    // 清理函数：精准取消当前元素的监听
    return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current);
      }
    };
  }, []); // 空依赖，仅初始化一次Observer

  useEffect(() => {
    if (!sectionRef.current) return;
    // 统一选择所有目标动画元素
    const slideElements = sectionRef.current.querySelectorAll('.registration-slide');
    
    if (isIntersecting) {
      slideElements.forEach(el => el.classList.add('slide-in'));
    } else {
      slideElements.forEach(el => el.classList.remove('slide-in'));
    }
  }, [isIntersecting]);

  return (
    {/* 将ref绑定到父容器 */}
    <div ref={sectionRef} className="registration-section">
      <h1 className='registration-slide'>Title</h1>
      <div className='registration-col'>
        <div className='registration-left-col registration-slide'>test left element</div>
      </div>
    </div>
  );
};

export default RegistrationSection;

CSS部分 #

/* 提高优先级：用类名组合确保覆盖初始样式 */
.registration-slide.slide-in {
  transform: translate(0, 0);
  opacity: 1;
  transition: all 1s ease;
}

h1.registration-slide {
  transform: translate(0, -150%);
  opacity: 0;
  transition: all 1s ease; /* 初始状态添加过渡，避免切换生硬 */
}

div.registration-slide {
  transform: translate(-150%, 0);
  opacity: 0;
  transition: all 1s ease;
}

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