How to make a transition on a navbar opening in React with Tailwind

I want to have a nice transition to make my nav appear when i click on tmy button but i can’t find anything to make a transition. It just appear out of nowhere everytime.

Here is the code :

import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export default function Header() {
  const [isOpened, setIsOpened] = useState(false);

  return (
    <div className="sticky top-0 h-20 w-screen">
      <div className="m-auto flex flex-col items-center justify-between gap-5 pt-4 text-gray-300">
        <div className="itemc flex h-9 w-full justify-between px-9">
          <h1 className="self-center text-3xl">ARTHUR TROVATO</h1>
          <button onClick={() => setIsOpened(!isOpened)}>
            <FontAwesomeIcon
              className="h-full w-full"
              icon="fa-solid fa-square-caret-down"
            />
          </button>
        </div>
        {isOpened && (
          <nav className="flex w-full flex-col justify-center">
            <a className="w-full border-t py-1 text-center" href="#">
              PRESENTATION
            </a>
            <a className="w-full border-t py-1 text-center" href="#">
              COMPETENCES
            </a>
            <a className="w-full border-t py-1 text-center" href="#">
              PORTFOLIO
            </a>
            <a className="w-full border-t py-1 text-center" href="#">
              A PROPOS
            </a>
            <a className="w-full border-t py-1 text-center" href="#">
              CONTACT
            </a>
            <a className="w-full border-y border-t py-1 text-center" href="#">
              TELECHARGER LE CV
            </a>
          </nav>
        )}
      </div>
    </div>
  );
}

I tried <nav className="flex w-full flex-col justify-center transition-all"> and the other options Tailwind gave me but it dosen’t seem to work.

>Solution :

To create a smooth transition for your navigation menu using Tailwind CSS, you can utilize the transition classes provided by Tailwind. In your code, you have already applied the transition-all class to the nav element, which should work. However, the issue might be with the initial state of the navigation (isOpened).

To fix the problem and make the transition work correctly, you need to modify the CSS a bit and use the transition class only when the navigation is shown. Additionally, you can use the opacity property for a fade-in effect.

Here’s the updated code:

import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export default function Header() {
  const [isOpened, setIsOpened] = useState(false);

  return (
    <div className="sticky top-0 h-20 w-screen">
      <div className="m-auto flex flex-col items-center justify-between gap-5 pt-4 text-gray-300">
        <div className="itemc flex h-9 w-full justify-between px-9">
          <h1 className="self-center text-3xl">ARTHUR TROVATO</h1>
          <button onClick={() => setIsOpened(!isOpened)}>
            <FontAwesomeIcon
              className="h-full w-full"
              icon="fa-solid fa-square-caret-down"
            />
          </button>
        </div>
        <nav
          className={`${
            isOpened ? "opacity-100" : "opacity-0"
          } transition-opacity duration-300`}
        >
          <a className="w-full border-t py-1 text-center" href="#">
            PRESENTATION
          </a>
          <a className="w-full border-t py-1 text-center" href="#">
            COMPETENCES
          </a>
          <a className="w-full border-t py-1 text-center" href="#">
            PORTFOLIO
          </a>
          <a className="w-full border-t py-1 text-center" href="#">
            A PROPOS
          </a>
          <a className="w-full border-t py-1 text-center" href="#">
            CONTACT
          </a>
          <a className="w-full border-y border-t py-1 text-center" href="#">
            TELECHARGER LE CV
          </a>
        </nav>
      </div>
    </div>
  );
}

In this updated code, I use the Tailwind CSS classes opacity-0 and opacity-100 to control the visibility of the navigation. When isOpened is false, the opacity-0 class is applied, making the navigation invisible. When isOpened is true, the opacity-100 class is applied, making the navigation visible. We also added the transition-opacity and duration-300 classes to enable a smooth fade-in and fade-out effect with a duration of 300ms.

Now, when you click the button to toggle the navigation, it should smoothly appear and disappear with the fade-in/fade-out effect.