Transition all in Tailwind css not working properly

Why is that when i open the toggle bar content appears instantly but if i close it transition kciks in?

const Navbar = () => {
const [nav,setNav] = useState(true)

const handleNav = () =>{
    setNav(!nav);
}


return (
    <div>
        <div className='flex justify-between hidden'>
            <img className='w-[140px] mx-3'src={dremslogo} alt='/'></img>
            <ul className='flex'>
                <li className='p-6 py-10 text-xl'>Home</li>
                <li className='p-6 py-10 text-xl'>About</li>
                <li className='p-6 py-10 text-xl'>Features</li>
                <li className='p-6 py-10 text-xl'>Contact</li>
                <li className='p-6 ml-10 py-10 text-xl'>Register</li>
                <li className='p-6 py-10 text-xl'>Log in</li>
            </ul>
        </div>
        <div className='flex justify-between flex-wrap back'>
            <img className='w-[180px] p-5'src={dremslogo} alt='/'></img>
            <div className='p-5 pt-9' onClick={handleNav}>
                {!nav ? <AiOutlineClose className='cursor-pointer' size={35} /> : <AiOutlineMenu className= 'cursor-pointer' size={35}/>}
            </div>
        <ul className={!nav ? 'w-[100%] max-h-screen':
                            'w-[100%] max-h-0 overflow-hidden transition-all duration-500'} 
                        onClick={handleNav}>
            <li className='p-3 px-5 text-xl'>Home</li>
            <li className='p-3 px-5 text-xl'>About</li>
            <li className='p-3 px-5 text-xl'>Features</li>
            <li className='p-3 px-5 text-xl'>Contact</li>
            <li className='p-3 px-5 text-xl'>Register</li>
            <li className='p-3 px-5 text-xl'>Log in</li>
        </ul>
        </div>
    </div>
 
 );