React Transition与React Reveal在Toast组件进入时失效问题求助

问题根源分析 #

1. 重复Key冲突：同时给Fade和内部Toast组件设置相同key，导致React Diff算法无法正确识别新挂载的组件，跳过进入动画触发。
2. 组件嵌套逻辑问题：TransitionGroup与react-reveal的Fade组件生命周期存在冲突，TransitionGroup的进入事件未同步触发Fade的进入动画。
3. 容器条件渲染：toasts && (...)的判断导致容器在toasts从空变为非空时才挂载，新添加的Toast组件无法触发初始进入动画。

修复方案 #

方案1：移除TransitionGroup，仅用react-reveal管理过渡

react-reveal的Fade组件本身已内置进入/退出动画逻辑，无需额外嵌套TransitionGroup，调整代码如下：

import Toast from ".";
import { useContext } from "react"
import { ToastStateContext } from "./context";
import Fade from 'react-reveal/Fade';

export default function ToastContainer() {
  const { toasts } = useContext(ToastStateContext);
  
  // 始终渲染容器，避免条件渲染导致的动画丢失
  return (
    <div className="absolute top-24 pt-1 right-2">
      {toasts.map((toast) => (
        // 仅在最外层的Fade组件设置唯一key
        <Fade key={toast.id} top>
          <Toast
            id={toast.id}
            type={toast.type}
            message={toast.message}
          />
        </Fade>
      ))}
    </div>
  );
}

方案2：保留TransitionGroup并兼容react-reveal

若必须使用TransitionGroup管理列表状态，需用CSSTransition包裹Fade，确保进入事件同步触发动画：

import Toast from ".";
import { useContext } from "react"
import { ToastStateContext } from "./context";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import Fade from 'react-reveal/Fade';

export default function ToastContainer() {
  const { toasts } = useContext(ToastStateContext);
  
  return (
    <div className="absolute top-24 pt-1 right-2">
      <TransitionGroup>
        {toasts.map((toast) => (
          <CSSTransition key={toast.id} timeout={500} classNames="fade">
            <Fade top>
              <Toast
                id={toast.id}
                type={toast.type}
                message={toast.message}
              />
            </Fade>
          </CSSTransition>
        ))}
      </TransitionGroup>
    </div>
  );
}

额外注意事项 #

• 确保Toast组件的关闭逻辑是从toasts数组中移除对应项，而非通过CSS隐藏，这样React会卸载组件并触发Fade的退出动画。
• 检查react-reveal版本，确保与React版本兼容（React 18需使用react-reveal@latest）。

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