@KeerthiVasan-N
Posted
Bro I how to make the nice transition in mobile view when menu item is clicked
@kanuos
Posted
@KeerthiVasan-N To make the transition, I just added and removed the tailwind translate-x-full class on mobile screens. To add transition, I just added transition-all class to the menu for the mobile screens!
Initially, the mobile nav menu had translate-x-full which shifts the entire menu by 100% to the right. This is the INITIAL state.
When the hamburger button is clicked, I am just removing the translate-x-full class thus shifting the nav menu to its original position. Since I am using CSS transforms (via tailwind) I can simply use transition property.
If I were to toggle the display using the display: none & display: block properties, the transition effect wouldn't work.
