单击TailwindCSS淡入元素

Question

所以我正在制作这个应用程序，当我点击这个按钮时，我需要在菜单中淡出。我让它在点击时呈现使用状态，但我不能让它淡入/淡出点击。当我在Chrome控制台中编辑opacity值时，转换工作正常，但是当我想使用状态改变它时，它就没有了。

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

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;

代码框： 沙盒

为了清楚起见，当我单击菜单按钮时，我希望菜单卡淡入，当我单击“关闭”按钮时，我希望菜单卡淡出。

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