TailwindCSS fade in Element on click-CodePudding

So I'm making this app and I need to fade in the menu when i click the button. I have it rendering on click using state, but I can't get it to fade in / fade out on click. When I edit the opacity value inside Chrome Dev Console the transition works fine, but when I want to change it using state it doesn't.

Any help? Thanks in advance!

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: ** Sandbox

Just to be clear, I want the menu card to fade in when I click the menu button, and I want the menu card to fade out when i click the close button.

CodePudding user response：

The solution is, you need to add duration, like this:

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

Here is my forked sandbox you had given, I've removed extra inline CSS, so it may become evident.

Here is the complete code:


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;

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