我試圖使用Tailwind創(chuàng)建一個(gè)用戶(hù)菜單，但是我不確定如何檢查用戶(hù)是否被點(diǎn)擊來(lái)顯示動(dòng)畫(huà)。

我可以用一個(gè)鉤子讓它出現(xiàn)和消失，等等。但是如果我使用鉤子，我就不能讓用戶(hù)菜單從右邊滑進(jìn)來(lái)，就像我正在嘗試的那樣。

以下是我所知道的:

<div className="relative">
  <Image
    className="rounded-full cursor-pointer peer"
    src={currentUser?.user.image}
    alt="user avatar"
    width="35"
    height="35"
    onClick={() => menu.onToggle()}
  />
  =<UserMenu />
</div>

和用戶(hù)菜單:

<div
  className="absolute bg-black top-[59px] left-[100px] rounded-bottom-md transform    duration-200 peer-hover:-translate-x-[200px]"
>
  {userMenuItems.map((item) => (
    <div className="py-4 px-8 flex flex-row items-center justify-start text-zinc-400">
      {item.label}
    </div>
  ))}
</div>

使用peer hover也很有意思，有沒(méi)有人也知道如何讓用戶(hù)菜單出現(xiàn)在hover上卻又停留下來(lái)？

我找到了一個(gè)解決這個(gè)問(wèn)題的方法，它對(duì)我很有效，但是有點(diǎn)粗糙。請(qǐng)注意，我的解決方案是針對(duì)懸停的，而針對(duì)單擊的解決方案是類(lèi)似的，唯一的區(qū)別是使用onClick prop而不是onMouseEnter。

懸停時(shí)顯示動(dòng)畫(huà)，不消失。 您可以做的是讓一個(gè)狀態(tài)懸停，并使用onMouseEnter屬性來(lái)指示對(duì)等體是否懸停，并在UserMenu組件中，使用該狀態(tài)通過(guò)模板文字有條件地應(yīng)用tailwind類(lèi)。

這將保留動(dòng)畫(huà)，并應(yīng)用懸停功能。

const [hovered, setHovered] = useState(false);

//...

<div className="relative">
  <Image
    className="rounded-full cursor-pointer peer"
    src={currentUser?.user.image}
    alt="user avatar"
    width="35"
    height="35"
    onClick={() => menu.onToggle()}
    onMouseEnter={() => setHovered(true)}   // hovered? set the state to true.
  />
  <UserMenu hovered={hovered} />
</div>

<div
  className={`absolute top-[59px] left-[100px] rounded-bottom-md transform    duration-200 ${hovered ? "bg-black -translate-x-[200px]" : "bg-transparent"}`}
>
  {userMenuItems.map((item) => (
    <div className={`py-4 px-8 flex flex-row items-center justify-start ${hovered ? "text-zinc-400" : "text-transparent"}`}>
      {item.label}
    </div>
  ))}
</div>

包括取消懸停時(shí)消失。 同樣常見(jiàn)的是，當(dāng)菜單顯示時(shí)，用戶(hù)懸停菜單，當(dāng)你不再懸停實(shí)際菜單時(shí)，它就會(huì)消失(對(duì)等是不相關(guān)的)。為此，如果您愿意，可以使用onMouseLeave屬性使菜單消失。

這方面的代碼如下所示:

const [hovered, setHovered] = useState(false);

//...

<div className="relative">
  <Image
    className="rounded-full cursor-pointer peer"
    src={currentUser?.user.image}
    alt="user avatar"
    width="35"
    height="35"
    onClick={() => menu.onToggle()}
    onMouseEnter={() => setHovered(true)}   // hovered? set the state to true.
  />
  <UserMenu hovered={hovered} onLeave={() => setHovered(false)} />
</div>

<div
  className={`absolute top-[59px] left-[100px] rounded-bottom-md transform    duration-200 ${hovered ? "bg-black -translate-x-[200px]" : "bg-transparent"}`}
>
  {userMenuItems.map((item) => (
    <div className={`py-4 px-8 flex flex-row items-center justify-start ${hovered ? "text-zinc-400" : "text-transparent"}`}
      onMouseLeave={onLeave}
    >
      {item.label}
    </div>
  ))}
</div>