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>
      }
    </>
  )
}

我正在尝试动画一个错误通知去从上面的UI。translate-y-12类正在应用，但我的转换不起作用。
我尝试将transition-all更改为transition-transform。
我认为它类似于：
React onMount animations
React - animate mount and unmount of a single component