title: Animate a hamburger menu from Tailwind in Angular
body: <p>I'm using Tailwind UI in an Angular application and can open / close the hamburger menu with the following</p>
  <pre><code>&lt;header&gt;
    &lt;div class=&quot;-mr-2 -my-2 md:hidden&quot;&gt;
      &lt;button type=&quot;button&quot; (click)=&quot;toggleMobileMenu()&quot;
        class=&quot;bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500&quot;&gt;
        &lt;svg class=&quot;h-6 w-6&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot;
          aria-hidden=&quot;true&quot;&gt;
          &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M4 6h16M4 12h16M4 18h16&quot; /&gt;
        &lt;/svg&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;absolute z-30 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden&quot; *ngIf=&quot;mobileMenuOpen&quot;&gt;
      &lt;div class=&quot;rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50&quot;&gt;
  
        &lt;div class=&quot;flex items-center justify-between&quot;&gt;
          &lt;button (click)=&quot;toggleMobileMenu()&quot; type=&quot;button&quot;
            class=&quot;bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500&quot;&gt;
            &lt;svg class=&quot;h-6 w-6&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot;
              aria-hidden=&quot;true&quot;&gt;
              &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M6 18L18 6M6 6l12 12&quot; /&gt;
            &lt;/svg&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;py-6 px-5&quot;&gt;
          &lt;div class=&quot;grid gap-4&quot;&gt;
            &lt;a routerLink=&quot;/&quot; class=&quot;text-base font-medium text-gray-900 hover:text-gray-700&quot;&gt;
              Home
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  
  
  toggleMobileMenu() {
    this.mobileMenuOpen = !this.mobileMenuOpen;
  }
  </code></pre>
  <p>This is a really simple example.</p>
  <p>How do I animate this?</p>
  <p>The instructions are :</p>
  <pre><code>    Mobile menu, show/hide based on mobile menu state.
  
      Entering: &quot;duration-200 ease-out&quot;
        From: &quot;opacity-0 scale-95&quot;
        To: &quot;opacity-100 scale-100&quot;
      Leaving: &quot;duration-100 ease-in&quot;
        From: &quot;opacity-100 scale-100&quot;
        To: &quot;opacity-0 scale-95&quot;
  </code></pre>
  <p>and I don't know how to translate that to an angular animation</p>