如何实现组件挂载与卸载时的Fade过渡效果（无需父组件管理状态）

我明白你的需求：只想通过visible控制组件显隐，让Fade自己在挂载/卸载时自动触发过渡，完全不用父组件操心过渡相关的状态管理对吧？那最理想的方式是让Fade组件自身接管过渡逻辑，避免直接返回undefined导致组件被瞬间卸载（那样就看不到退出动画了）。

下面是具体的实现思路和代码：

核心思路 #

让Fade组件内部维护两个状态：

1. shouldRender：控制组件是否真的留在DOM中（visible为false时，先不卸载，等退出动画结束再移除）
2. isAnimating：控制动画的触发（挂载时逐步显示，卸载时逐步隐藏）
   结合useEffect监听visible的变化，配合CSS过渡实现完整的挂载/卸载动画。

自定义Fade组件代码 #

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

const Fade = ({ visible, children }) => {
  // 控制组件是否保留在DOM中
  const [shouldRender, setShouldRender] = useState(visible);
  // 控制动画状态（决定透明度/过渡效果）
  const [isAnimating, setIsAnimating] = useState(visible);
  const elementRef = useRef(null);

  useEffect(() => {
    if (visible) {
      // 显示逻辑：先渲染组件，再触发进入动画
      setShouldRender(true);
      // 延迟0ms是为了确保DOM已经挂载完成再触发动画
      const triggerAnimation = setTimeout(() => {
        setIsAnimating(true);
      }, 0);
      return () => clearTimeout(triggerAnimation);
    } else {
      // 隐藏逻辑：先触发退出动画，动画结束后再卸载组件
      setIsAnimating(false);
      const handleAnimationEnd = () => {
        setShouldRender(false);
        elementRef.current?.removeEventListener('transitionend', handleAnimationEnd);
      };
      elementRef.current?.addEventListener('transitionend', handleAnimationEnd);
      return () => {
        elementRef.current?.removeEventListener('transitionend', handleAnimationEnd);
      };
    }
  }, [visible]);

  // 不需要渲染时直接返回null
  if (!shouldRender) return null;

  return (
    <div
      ref={elementRef}
      style={{
        opacity: isAnimating ? 1 : 0,
        // 这里可以自定义过渡时长和缓动效果
        transition: 'opacity 300ms ease-in-out',
        // 可选：添加位移过渡，让动画更丰富
        // transform: isAnimating ? 'translateY(0)' : 'translateY(15px)',
        // transition: 'opacity 300ms ease-in-out, transform 300ms ease-in-out',
        // 防止动画期间元素占据空间（可选）
        // pointerEvents: isAnimating ? 'auto' : 'none',
      }}
    >
      {children}
    </div>
  );
};

父组件使用方式 #

你只需要传递visible prop控制显隐，完全不用管Fade内部的状态：

import { useState } from 'react';
import Fade from './Fade';

const ParentComponent = () => {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setVisible(!visible)}>切换组件显示</button>
      <Fade visible={visible}>
        <SomeComponent />
      </Fade>
    </div>
  );
};

为什么这是最优方案？ #

• 完全解耦：父组件只负责控制显隐，过渡逻辑全在Fade内部，完全符合你“不想让父组件管理Fade状态”的需求
• 完整过渡体验：避免了直接返回undefined导致组件瞬间消失的问题，退出动画会完整播放后再卸载组件
• 灵活定制：可以通过修改CSS过渡属性（时长、缓动、过渡的样式属性）轻松调整动画效果
• 性能安全：使用transitionend事件监听动画结束，避免定时器的误差，同时清理事件监听防止内存泄漏

如果你用的是Material-UI等UI库，它们的内置Fade组件其实已经实现了类似逻辑，但如果是自定义需求，上面的方案是最基础且可控的。

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