我可以将 setTimeout() 放在动态 class 中吗？

Question

我想等待1秒来添加隐藏以完成过渡变换。否则它会在 150 毫秒过渡结束前隐藏。这是一个从顶部弹出的固定覆盖层。那么有人知道我应该如何解决这个问题吗？

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

Answer 1

我不太确定你的目标是什么，但是你确定你可以在 className 中使用 setTimeout 但不能直接使用，这是我尝试过的方法：

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

flex class不会添加但是在setTimeout之后表示1秒后。

我可以将 setTimeout() 放在动态 class 中吗？

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

reactjs

next.js

tailwind-css