Animate toggle menu dropdown - html

Question

I want to animate a menu when it's toggled. I don't know what I'm missing. I've tried setting an inline style but it didn't work.
On this project, I'm using React with TailwindCSS. The Tailwind transition effects are not working too, so I suppose this has to be done with CSS and/or JavaScript.
Here's my code:
import React, { useState } from 'react';
import { NavLink } from 'react-router-dom';
const NavBar = () => {
const [open, setOpen] = useState(false);
const toggleOpenHandler = () => setOpen(!open);
return (
<div>
<div className="relative px-4 pt-6 bg-red-100 sm:px-6 lg:px-8">
<nav className="relative flex items-center justify-between sm:h-10 lg:justify-start">
<div className="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
<div className="flex items-center justify-between w-full md:w-auto">
<NavLink to="/" aria-label="Home">
<img className="w-auto h-8 sm:h-10" src="https://tailwindui.com/img/logos/workflow-mark-on-white.svg" alt="Logo" />
</NavLink>
<div className="flex items-center -mr-2 md:hidden">
<button onClick={toggleOpenHandler} type="button" className="inline-flex items-center justify-center p-2 text-blue-400 transition duration-150 ease-in-out rounded-md hover:text-blue-500 hover:bg-blue-100 focus:outline-none focus:bg-blue-100 focus:text-blue-500" id="main-menu" aria-label="Main menu" aria-haspopup="true">
<svg className="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<div className="hidden md:block md:ml-10 md:pr-4">
<NavLink to="/services" className="font-medium text-blue-500 transition duration-150 ease-in-out hover:text-blue-900">Serviços</NavLink>
<NavLink to="/about" className="ml-8 font-medium text-blue-500 transition duration-150 ease-in-out hover:text-blue-900">Sobre</NavLink>
<NavLink to="/releases" className="ml-8 font-medium text-blue-500 transition duration-150 ease-in-out hover:text-blue-900">Lançamentos</NavLink>
<NavLink to="/contact" className="ml-8 font-medium text-indigo-600 transition duration-150 ease-in-out hover:text-indigo-900">Contato</NavLink>
</div>
</nav>
</div>
{/*
Mobile menu, show/hide based on menu open state.
Entering: "duration-150 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
*/}
{open &&
<div style={{ transition: 'all 3s ease-in-out' }} className="absolute inset-x-0 top-0 p-2 transition origin-top-right transform md:hidden">
<div className="rounded-lg shadow-md">
<div className="overflow-hidden bg-red-100 rounded-lg shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
<div className="flex items-center justify-between px-5 pt-4">
<div>
<img className="w-auto h-8" src="https://tailwindui.com/img/logos/workflow-mark-on-white.svg" alt="" />
</div>
<div className="-mr-2">
<button onClick={toggleOpenHandler} type="button" className="inline-flex items-center justify-center p-2 text-blue-400 transition duration-150 ease-in-out rounded-md hover:text-blue-500 hover:bg-blue-100 focus:outline-none focus:bg-blue-100 focus:text-blue-500" aria-label="Close menu">
<svg className="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div className="px-2 pt-2 pb-3">
<NavLink to="/services" className="block px-3 py-2 text-base font-medium text-blue-700 transition duration-150 ease-in-out rounded-md hover:text-blue-900 hover:bg-blue-50 focus:outline-none focus:text-blue-900 focus:bg-blue-50" role="menuitem">Serviços</NavLink>
<NavLink to="/about" className="block px-3 py-2 mt-1 text-base font-medium text-blue-700 transition duration-150 ease-in-out rounded-md hover:text-blue-900 hover:bg-blue-50 focus:outline-none focus:text-blue-900 focus:bg-blue-50" role="menuitem">Sobre</NavLink>
<NavLink to="/releases" className="block px-3 py-2 mt-1 text-base font-medium text-blue-700 transition duration-150 ease-in-out rounded-md hover:text-blue-900 hover:bg-blue-50 focus:outline-none focus:text-blue-900 focus:bg-blue-50" role="menuitem">Lançamentos</NavLink>
</div>
<div>
<NavLink to="#" className="block w-full px-5 py-3 font-medium text-center text-indigo-600 transition duration-150 ease-in-out bg-blue-50 hover:bg-blue-100 hover:text-indigo-700 focus:outline-none focus:bg-blue-100 focus:text-indigo-700" role="menuitem">
Contato
</NavLink>
</div>
</div>
</div>
</div>
}
</div>
);
}
export default NavBar;

Answer 1

There is no transition happening, therefore, you don't have any animations.
Whenever this div
{open &&
<div style={{ transition: 'all 3s ease-in-out' }} className="absolute inset-x-0 top-0 p-2 transition origin-top-right transform md:hidden">
gets put into the DOM, it already has a width and height set. If you want it to transition, you need to have an initial height (or width) of zero, then it needs to transition to the actual value.
Consider not having the open && part and just having a "hidden" div, by having one of the dimensions being zero, like so:
<div
style={{ transition: 'all 3s ease-in-out', width: open ? '100px' : '0' }}
className="absolute inset-x-0 top-0 p-2 transition origin-top-right transform md:hidden"
>
You can make this more complicated by having the component show up with the size "0" and then immediately change to the value you want... It's just more complicated.