React CSS Transition失效：井字棋点击无淡入过渡效果

我看了你的代码，问题出在**CSSTransition的触发逻辑**上：

你当前给Fade组件的in属性一直设为true，对于初始就填充的单元格（比如第一行第二列、第二行第一列），它们在组件首次渲染时就会挂载，但因为appear属性默认是false，所以不会触发过渡动画；而当你点击棋盘新增第二行第三列的圆形图标时，这个Fade组件是第一次被渲染，in属性一开始就是true，同样因为没有设置appear={true}，React Transition Group不会触发进入动画——它需要看到in从false切换到true的状态变化，或者明确允许首次挂载时触发过渡。

下面给你两种可行的解决方案：

方案一：仅针对新增单元格触发过渡（推荐） #

这个方案会区分初始填充的单元格和后续新增的单元格，只有新增的单元格会触发淡入动画，同时保留初始单元格的直接显示效果。

步骤1：修改组件状态，记录初始填充的单元格 #

在constructor里添加一个状态，记录一开始就有内容的单元格位置：

constructor(props) {
  super(props);
  const initialBoard = [
    [0, 1, 0],
    [2, 0, 0],
    [0, 0, 0]
  ];
  // 记录初始已填充的单元格坐标
  const initialFilled = {};
  initialBoard.forEach((row, rowIdx) => {
    row.forEach((cell, colIdx) => {
      if (cell !== 0) {
        initialFilled[`${rowIdx}-${colIdx}`] = true;
      }
    });
  });
  this.state = {
    board: initialBoard,
    initialFilled
  };
}

步骤2：修改Fade组件的属性 #

给Fade组件添加appear属性，并且只对非初始填充的单元格启用appear，同时通过key确保单元格内容变化时重新挂载组件：

{cell === 1 && (
  <Fade 
    in={true}
    // 只有新增的单元格才启用首次挂载过渡
    appear={!this.state.initialFilled[`${rowIndex}-${colIndex}`]}
    timeout={1000}
    classNames="fade"
    // 当单元格内容变化时，强制重新挂载组件
    key={`${rowIndex}-${colIndex}-${cell}`}
  >
    <img src="https://image.ibb.co/nDDDuw/circle_outline.png" alt="圆形图标" className="cell-content" />
  </Fade>
)}
{cell === 2 && (
  <Fade 
    in={true}
    appear={!this.state.initialFilled[`${rowIndex}-${colIndex}`]}
    timeout={1000}
    classNames="fade"
    key={`${rowIndex}-${colIndex}-${cell}`}
  >
    <img src="https://image.ibb.co/jY0nMb/close.png" alt="叉形图标" className="cell-content" />
  </Fade>
)}

步骤3：保留现有CSS #

你的CSS代码已经正确定义了淡入过渡的类，不需要修改：

.fade-enter {
  opacity: 0.01;
}
.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 1000ms ease-in;
}

方案二：所有单元格（包括初始）都触发过渡 #

如果你希望初始填充的单元格也有淡入效果，只需简化修改：

1. 在Fade组件中添加appear={true}属性；
2. 给Fade组件设置唯一key，确保内容变化时重新挂载。

修改后的Fade使用代码：

{cell === 1 && (
  <Fade 
    in={true}
    appear={true}
    timeout={1000}
    classNames="fade"
    key={`${rowIndex}-${colIndex}-${cell}`}
  >
    <img src="https://image.ibb.co/nDDDuw/circle_outline.png" alt="圆形图标" className="cell-content" />
  </Fade>
)}
{cell === 2 && (
  <Fade 
    in={true}
    appear={true}
    timeout={1000}
    classNames="fade"
    key={`${rowIndex}-${colIndex}-${cell}`}
  >
    <img src="https://image.ibb.co/jY0nMb/close.png" alt="叉形图标" className="cell-content" />
  </Fade>
)}

这样修改后，当你点击棋盘新增单元格时，圆形图标就会以淡入的过渡效果出现了。

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