html - Navbar transition in tailwindcss

Question

I have a navbar and I want that when someone clicks on the button, it will be open with transition in tailwindcss.

const bar_btn = document.getElementById('BAR-BTN');
const mobileMenu = document.getElementById('mobileMenu')
bar_btn.addEventListener(
 'click',
  function() {
    mobileMenu.classList.toggle('w-0')
    mobileMenu.classList.toggle('h-0')
  }
)

<nav>
  <div>
    <button id='BAR-BTN'><i class="fas fa-bars fa-2x"></i></button>
  </div>
  <ul class="transition-transform ease-linear h-0 w-0 delay-1000 duration-1000"
    id="mobileMenu">
    <li>test-1</li>
    <li>test-2</li>
    <li>test-3</li>
  </ul>
</nav>

question from:https://stackoverflow.com/questions/65829159/navbar-transition-in-tailwindcss

Answer 1

I could not find a way to give transition to height property(which we can in pure css) so i used scale to give a transition effect

See if it helps

  const bar_btn = document.getElementById('BAR_BTN');
  const mobileMenu = document.getElementById('mobileMenu')

  bar_btn.addEventListener('click',function()
   {
          mobileMenu.classList.toggle('transform');

      }
  );

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<nav>
  <div>
    <button id="BAR_BTN" class="px-10 py-2 mt-10 mx-10 w-1/4 hover:bg-green-300 bg-green-200 transition-all">button</button>
  </div>
  <ul id="mobileMenu" class="mx-10 p-5 border-4 border-black overflow-hidden text-xl w-1/4 origin-top  duration-300 scale-y-0" >
    <li>Test-1</li>
    <li>Test-2</li>
    <li>Test-3</li>
  </ul>
</nav>