小编wuj*_*vic的帖子

所以我正在制作这个应用程序，当我单击按钮时，我需要淡入菜单。我使用状态在单击时呈现它，但无法让它在单击时淡入/淡出。当我opacity在 Chrome 开发控制台中编辑值时，转换工作正常，但当我想使用状态更改它时，它却不起作用。

有什么帮助吗？提前致谢！

import React, { useState } from "react";
import { useRouter } from "next/router";
import { MenuIcon, XIcon } from "@heroicons/react/outline";

function Header() {
  const router = useRouter();

  const [popCard, setPopCard] = useState("hidden");
  const [fade, setFade] = useState(true);

  const handleMenuClick = () => {
    setPopCard("inline-block");
    setFade(true);
  };

  const handleXClick = () => {
    setPopCard("hidden");
    setFade(false);
  };

  return (
    <div className="text-center">
      <header className="sticky z-50 top-0  shadow-md bg-white border-b p-5">
        <div className="flex justify-between items-center">
          <h1
            className="text-6xl text-red-500 …