how to apply smooth transition on the element using tailwind css - next.js

Question

I have make a nav bar using tailwind css in next.js it is responsive and working fine.
every thing is working fine but when i click the burger button it shows the list appears instantly but i want to show the bottom (un-order list) on small screen size with smooth transition and i have no idea how to make the transition smooth
the solution of the problem i want is to make this list smoothly visible on the screen
`
import React, { useEffect, useState } from "react";
import { MenuAlt1Icon } from "#heroicons/react/outline";
function Header() {
const [isOpen, setisOpen] = React.useState(false);
const [size, setSize] = useState(0);
function handleClick() {
setisOpen(!isOpen);
}
useEffect(() => {
setSize(window.innerWidth);
window.addEventListener("resize", handleSize);
return () => window.removeEventListener("resize", handleSize);
}, []);
const handleSize = () => {
setSize(window.innerWidth);
};
`
Above is the javascript code
and below is the jsx and tailwind
return (
<header>
<nav className={` shadow-md px-5 ${isOpen && size < 640 && "pb-3"}`}>
<button
type="button"
className={`${
size >= 640 ? "hidden" : "inline-block h-12 focus:outline-none"
}`}
onClick={handleClick}
>
<MenuAlt1Icon className="h-6 w-6" />
</button>
<ul
className={` ${
size >= 640
? " flex h-12 items-center space-x-2 "
: `${
isOpen
? `block space-y-2 border-t-2 border-gray-50 pt-2 transition duration-500 ease-linear`
: `hidden`
}`
}`}
>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
<li>element 4</li>
</ul>
</nav>
</header>
);
}
export default Header;

Answer 1

If you want a top to down dropdown animation, try to read: Animating max-height with CSS transitions
You can try to use these tailwind classes transition-all max-h-screen max-h-0.

Answer 2

Now don't be like me. By applying the class md:hidden to the navbar and hamburger you don't have to check if it clicked again to show the ul or navlinks. What you should instead do is add a negative -translate-x-full to make it display off screen and when the hamburger is clicked add a translate-x-0 to make it show by sliding into the screen. If not the sidebar won't be animated
do this
<ul className={`md:hidden flex flex-col fixed left-0 w-3/4 h-screen top-[60px] bg-green-300 items-center justify-around transition-all ease-in-out duration-200 ${isNavExpanded ? "translate-x-0 " : "-translate-x-full"}`}>
{links.map((item) => (
<li key={`link-${item}`} className="nav-link">
<a href={`#${item}`} className="">
{item}
</a>
</li>
))}
</ul>
instead of this
{isNavbarExpanded && (<ul className={`md:hidden flex flex-col fixed left-0 w-3/4 h-screen top-[60px] bg-green-300 items-center justify-around transition-all ease-in-out duration-200 ${isNavExpanded ? "translate-x-0 " : "-translate-x-full"}`}>
{links.map((item) => (
<li key={`link-${item}`} className="nav-link">
<a href={`#${item}`} className="">
{item}
</a>
</li>
))}
</ul>)}

Answer 3

Try this,
I used Tailwind Responsive Design way in official Doc.
so you can adjust sm: or md: in the className
import { useState } from "react";
import { MenuAlt1Icon } from "#heroicons/react/outline";
export default function Header() {
const [isOpen, setisOpen] = useState(false);
return (
<header>
<nav className={"shadow-md px-5 pb-3 sm:pb-0"}>
<button
type="button"
className={"inline-block h-12 focus:outline-none sm:hidden"}
onClick={() => setisOpen(!isOpen)}
>
<MenuAlt1Icon className="w-6 h-6" />
</button>
<ul className={`"flex flex-col sm:flex-row w-full h-auto justify-between space-x-2 space-y-2" ${isOpen === false && "hidden sm:flex"}`}>
<li>element 1</li>
<li>element 2</li>
<li>element 3</li>
<li>element 4</li>
</ul>
</nav>
</header>
);
}
Happy coding :)