条件渲染元素时Transition属性不生效问题排查

问题情况 #

要实现错误通知从UI顶部滑下的动画，已经给Alert组件加了translate-y-12类，但transition动画完全没效果。试过替换transition-all为transition-transform，还是无法触发动画。怀疑和React组件的挂载/卸载逻辑有关，相关代码如下：

function App() {
  const [error, setError] = useState({isError: false, message: ''});

  function checkFiles(e: React.DragEvent<HTMLDivElement>){
    const fileList = e.dataTransfer.files;

    if (fileList.length > 1){
      setError({isError: true, message: 'Bad'}); 
    }
  }

  return (
    <>
      {
        error.isError && <Alert severity="error" className={`fixed w-screen -top-12 transition-all duration-500 ${error.isError && 'translate-y-12'}`}>{error.message}</Alert>
      }
    </>
  )
}

问题根源 #

当error.isError变为true时，Alert组件是直接挂载到DOM树的，此时初始样式是-top-12和translate-y-12同时生效——浏览器会直接渲染最终状态，不会识别这是一个需要过渡的样式变化，所以动画不会触发。

解决方案 #

方案1：始终保留组件，用状态切换类名 #

不让组件卸载，始终留在DOM中，通过error.isError控制类名切换，让浏览器捕捉到样式变化：

function App() {
  const [error, setError] = useState({isError: false, message: ''});

  function checkFiles(e: React.DragEvent<HTMLDivElement>){
    const fileList = e.dataTransfer.files;
    if (fileList.length > 1){
      setError({isError: true, message: '只能上传一个文件'}); 
    }
  }

  return (
    <>
      <Alert 
        severity="error" 
        className={`fixed w-screen transition-all duration-500 ${error.isError ? 'translate-y-12' : '-top-12'}`}
        style={{ 
          opacity: error.isError ? 1 : 0,
          pointerEvents: error.isError ? 'auto' : 'none'
        }}
      >
        {error.message}
      </Alert>
    </>
  )
}

注意：避免用display: none，因为它会直接移除元素的渲染状态，导致过渡失效；改用opacity+pointerEvents组合，既能隐藏元素，又能保留DOM节点触发动画。

方案2：用React Transition Group处理挂载/卸载动画 #

这是React生态中处理组件挂载/卸载动画的标准方案，能精准控制动画生命周期：

1. 先安装依赖：

npm install react-transition-group

2. 修改组件代码：

import { CSSTransition } from 'react-transition-group';

function App() {
  const [error, setError] = useState({isError: false, message: ''});

  function checkFiles(e: React.DragEvent<HTMLDivElement>){
    const fileList = e.dataTransfer.files;
    if (fileList.length > 1){
      setError({isError: true, message: '只能上传一个文件'}); 
    }
  }

  return (
    <>
      <CSSTransition
        in={error.isError}
        timeout={500}
        classNames="error-alert"
        unmountOnExit
      >
        <Alert severity="error" className="fixed w-screen">
          {error.message}
        </Alert>
      </CSSTransition>
    </>
  )
}

3. 添加CSS过渡样式：

/* 进入动画初始状态 */
.error-alert-enter {
  transform: translateY(-100%);
}
/* 进入动画生效状态 */
.error-alert-enter-active {
  transform: translateY(0);
  transition: transform 500ms ease-in;
}
/* 退出动画初始状态 */
.error-alert-exit {
  transform: translateY(0);
}
/* 退出动画生效状态 */
.error-alert-exit-active {
  transform: translateY(-100%);
  transition: transform 500ms ease-out;
}

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