Transition not working Tailwindcss
//Hamburger Button
<div className='md:hidden text-3xl items-center' onClick={()=>{setMenu(true);}}>
<RxHamburgerMenu/>
</div>
//Menue
<div className={
${menu ? "top-0":"hidden"} -top-[490px] transition-all duration-300 absolute w-full py-4 px-8 bg-secondary}>
//close button
<AiOutlineClose className='float-right text-right text-lg' onClick={()=>setMenu(false)} />
//navlinks
<div className='mt-6'>
<ul className='text-center space-y-4 relative'>
<li>
<a onClick={()=>setMenu(false)} href="#home">Home</a>
</li>
<li>
<a onClick={()=>setMenu(false)} href="#program">Program</a>
</li>
<li>
</ul>
</div>
</div>2 Replies
hidden results in display: none which is not animatable.
The trick is to change the class to whatever you want to animate and set an eventlistener transitionend and set the display: none there.Thank you for the response. Yes I noticed that. The problem is solved replaced hidden with top-[-490px] and it works