Can i put a setTimeout() in a dynamic class?

Question

I want to wait 1 second to add hidden to finish the transition transform. Otherwise it hides before the 150ms transition ends. It's a fixed overlay that that pops down from the top. So does anyone know how i should work this out?

className={` flex-col fixed h-full w-full z-20 ${
          navOpen
            ? "flex"
            : setTimeout(() => {
                "hidden";
              }, 1000)
        } `} 

Answer 1

I'm not quite sure about your goal here but yeah sure you can use setTimeout inside className but not directly, here is what I tried :

const [navOpen,setNavOpen]=useState(false)

useEffect(()=>{
      setTimeout(() => {
        setNavOpen(!navOpen)
      }, 1000);      
    },[])

return (
    <div className={` flex-col fixed  bg-red-800 h-full w-full z-20 
              ${navOpen ? " flex " : " hidden "} `}> 
    </div>
  )

the flex class will not be added but after setTimeout means after 1 second.