React+Vite+TS中IntersectionObserver滚动触发CSS动画失效求助

在React（搭配Vite+TypeScript）中实现滚动触发的交差动画时遇到异常：参考原生JS无库教程编写的代码，无法触发从.hidden到.show的CSS过渡效果，元素始终处于.hidden状态；仅在无修改保存.tsx文件触发热更新时临时生效，刷新页面后问题复现。该代码在纯HTML/JS环境可正常运行，改用keyframes无监听方式虽能执行动画，但无法实现滚动触发，已排查确认非CSS样式问题。

核心问题是React组件渲染时机与DOM挂载的不匹配：

• 组件函数在初始渲染时会同步执行内部代码，此时React尚未将虚拟DOM渲染为真实DOM并挂载到页面，document.querySelectorAll(".hidden")无法获取到目标元素，导致IntersectionObserver没有绑定任何元素，自然不会触发状态切换。
• 热更新时组件重新渲染，此时真实DOM已经存在，能正确获取到元素并绑定观察，所以临时生效；但刷新页面后回到初始渲染流程，问题复现。

使用React的useEffect钩子，将IntersectionObserver的初始化与元素绑定逻辑放到DOM挂载完成后执行，同时添加清理逻辑避免内存泄漏：

修改后的TSX代码 #

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 初始化观察器
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add("show");
        } else {
          entry.target.classList.remove("show");
        }
      });
    });

    // 获取目标元素并绑定观察
    const hiddenElements = document.querySelectorAll(".hidden");
    hiddenElements.forEach((el) => observer.observe(el));

    // 清理函数：组件卸载时取消所有观察
    return () => {
      hiddenElements.forEach((el) => observer.unobserve(el));
    };
  }, []); // 空依赖数组确保仅在组件挂载时执行一次

  return (
    <div>
      <p className="sample">Sample hello Text</p>
      <p>
        <br />
        <br />
        <br />
        <br />
      </p>
      <p className="hidden">Instruction 1</p>
      <p>
        <br />
        <br />
        <br />
        <br />
      </p>
      <p className="hidden">Instruction 2</p>
      <p>
        <br />
        <br />
        <br />
        <br />
      </p>
      <p className="hidden">Instruction 3</p>
      <p>
        <br />
        <br />
        <br />
        <br />
      </p>
      <div>
        <img className="hidden" src="/src/assets/react.svg" />
      </div>
    </div>
  );
}

export default App;

说明 #

• useEffect的空依赖数组[]确保逻辑仅在组件首次挂载（DOM完成渲染）后执行一次，避免重复创建观察器或绑定元素。
• 返回的清理函数会在组件卸载时执行，取消所有元素的观察，防止内存泄漏。

1. 严格遵循React DOM生命周期：所有直接操作DOM的逻辑必须放到useEffect中，确保DOM已挂载完成。
2. 封装可复用的自定义Hook（可选）：将IntersectionObserver逻辑封装为Hook，方便在多个组件中复用：

import { useEffect, useRef } from 'react';

const useIntersectionObserver = (callback: (isIntersecting: boolean) => void) => {
  const ref = useRef<HTMLElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      callback(entry.isIntersecting);
    });

    const currentRef = ref.current;
    if (currentRef) observer.observe(currentRef);

    return () => {
      if (currentRef) observer.unobserve(currentRef);
    };
  }, [callback]);

  return ref;
};

// 使用示例
function AnimatedElement({ children }: { children: React.ReactNode }) {
  const ref = useIntersectionObserver((isIntersecting) => {
    if (ref.current) {
      ref.current.classList.toggle("show", isIntersecting);
    }
  });

  return <div ref={ref} className="hidden">{children}</div>;
}

3. CSS过渡优先级：确保.show类的样式优先级不低于.hidden，避免样式被覆盖（当前示例的CSS已满足要求）。

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