Transition property not working when conditionally rendering element

Question

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

I'm trying to animate an error notification to go down from above the UI. The translate-y-12 class is being applied but my transition isn't working.

I have tried changing transition-all to transition-transform.

I believe it is something similar to:

React onMount animations

React - animate mount and unmount of a single component

Answer 1

Got translate-y-12 property to work by not conditionally rendering the component.