如何实现React预加载器消失的平滑动画效果？

你当前的代码采用条件渲染直接控制预加载器的挂载/卸载，当loading状态变为false时，预加载器组件会瞬间从DOM树中被移除，预留的过渡动画完全没有执行窗口，你定义的.closed类自然无法生效。

步骤1：给预加载器添加过渡样式 #

首先需要给预加载器配置基础过渡属性，示例如下：

.preloader {
  /* 原有样式 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  /* 核心过渡配置 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 1;
  visibility: visible;
}

.preloader.closed {
  opacity: 0;
  visibility: hidden;
}

补充：添加visibility属性是为了避免透明度为0的预加载器挡住下层页面的交互

步骤2：修改组件渲染逻辑 #

不要直接卸载预加载器，改为通过状态控制类名触发过渡：

const App = () => {
  const [loading, setLoading] = useState(true);
  // 可选：添加状态控制动画结束后彻底卸载预加载器
  const [preloaderMounted, setPreloaderMounted] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false);
      // 等待过渡动画完成后再卸载组件，300ms对应上面CSS设置的过渡时长
      setTimeout(() => {
        setPreloaderMounted(false);
      }, 300);
    }, 5000);
    // 清理定时器避免内存泄漏
    return () => clearTimeout(timer);
  // 记得添加空依赖数组，避免定时器重复触发
  }, []);

  return (
    <div className='app'>
      {preloaderMounted && <Preloader className={loading ? "preloader" : "preloader closed"} />}
      <h1>Hello world!</h1>
    </div>
  );
}

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