TailwindCSS 在单击时淡入元素

Question

所以我正在制作这个应用程序，当我单击按钮时，我需要淡入菜单。我使用状态在单击时呈现它，但无法让它在单击时淡入/淡出。当我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 cursor-pointer"
            onClick={() => router.push("/")}
          >
            Velvet
          </h1>
          <MenuIcon
            className="h-8 text-red-500 cursor-pointer"
            onClick={handleMenuClick}
          />
        </div>
      </header>

      <div
        className={
          popCard +
          " w-[60%] flex-col border my-10 pb-3 rounded-3xl shadow-lg transition duration-300 ease-in-out " +
          `${fade === true ? "opacity-100" : "opacity-0"}`
        }
      >
        <div className="flex justify-end">
          <XIcon
            className="h-6 text-red-500 cursor-pointer mt-2 mr-2 opacity-70"
            onClick={handleXClick}
          />
        </div>
        <div className="space-y-8 text-3xl text-center mt-5 mb-10 text-red-500">
          <h1>Contac</h1>
          <h1>About Us</h1>
        </div>
      </div>
    </div>
  );
}

export default Header;

codesandbox： 沙箱

需要明确的是，我希望菜单卡在单击菜单按钮时淡入，并且我希望菜单卡在单击关闭按钮时淡出。

Answer 1

解决方案是，您需要添加持续时间，如下所示：

`transition-all duration-200 ${fade ? "opacity-100" : "opacity-0"}`

这是您提供的我的分叉沙箱，我删除了额外的内联 CSS，因此它可能会变得明显。

这是完整的代码：

function Header() {
  const [popCard, setPopCard] = useState("hidden");
  const [fade, setFade] = useState(false);

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

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

  console.log(fade, "fade");

  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 cursor-pointer">Velvet</h1>
          <button
            className="text-3xl border rounded-lg px-5"
            onClick={handleMenuClick}
          >
            Menu
          </button>
        </div>
      </header>

      <div className="p-10">
        <div
          className={`transition-all duration-200    ${
            fade ? "opacity-100" : "opacity-0"
          }`}
        >
          <div className="flex justify-end">
            <button className="mt-2 mr-2 border p-2" onClick={handleXClick}>
              Close
            </button>
          </div>
          <div className="space-y-2 text-3xl text-center mt-5 mb-10 mx-5 text-red-500">
            <h1>Kontakt</h1>
            <h1>O Velvetu</h1>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Header;

沙箱：https://codesandbox.io/s/sweet-swartz-mr3nru? file=/pages/index.js:41-1396