Mobile first news homepage

Community feedback

• 

  KeerthiVasan-N•350

  @KeerthiVasan-NPosted about 2 years ago

  Bro I how to make the nice transition in mobile view when menu item is clicked

  0

  ---

  

  Sounak Mukherjee•560

  @kanuosPosted about 2 years ago

  @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.

  0