title: TailwindUI transitions & transforms
body: <p>I'm using TailwindCSS, TailwindUI and StencilJS to build a dropdown TailwindUI component, but i'm having difficulty figuring out how to apply the suggested transitions provided next to the tailwind UI component.</p>
  <p>Here is the tailwindUI component:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;relative inline-block text-left&quot;&gt;
    &lt;div&gt;
      &lt;span class=&quot;rounded-md shadow-sm&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150&quot; id=&quot;options-menu&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;true&quot;&gt;
          Options
          &lt;svg class=&quot;-mr-1 ml-2 h-5 w-5&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
            &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z&quot; clip-rule=&quot;evenodd&quot;/&gt;
          &lt;/svg&gt;
        &lt;/button&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  
    &lt;!--
      Dropdown panel, show/hide based on dropdown state.
  
      Entering: &quot;transition ease-out duration-100&quot;
        From: &quot;transform opacity-0 scale-95&quot;
        To: &quot;transform opacity-100 scale-100&quot;
      Leaving: &quot;transition ease-in duration-75&quot;
        From: &quot;transform opacity-100 scale-100&quot;
        To: &quot;transform opacity-0 scale-95&quot;
    --&gt;
    &lt;div class=&quot;origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg&quot;&gt;
      &lt;div class=&quot;rounded-md bg-white shadow-xs&quot; role=&quot;menu&quot; aria-orientation=&quot;vertical&quot; aria-labelledby=&quot;options-menu&quot;&gt;
        &lt;div class=&quot;py-1&quot;&gt;
          &lt;a href=&quot;#&quot; class=&quot;group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
            &lt;svg class=&quot;mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
              &lt;path d=&quot;M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z&quot;/&gt;
              &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z&quot; clip-rule=&quot;evenodd&quot;/&gt;
            &lt;/svg&gt;
            Edit
          &lt;/a&gt;
          &lt;a href=&quot;#&quot; class=&quot;group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
            &lt;svg class=&quot;mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
              &lt;path d=&quot;M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z&quot;/&gt;
              &lt;path d=&quot;M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z&quot;/&gt;
            &lt;/svg&gt;
            Duplicate
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class=&quot;border-t border-gray-100&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;py-1&quot;&gt;
          &lt;a href=&quot;#&quot; class=&quot;group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
            &lt;svg class=&quot;mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
              &lt;path d=&quot;M4 3a2 2 0 100 4h12a2 2 0 100-4H4z&quot;/&gt;
              &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z&quot; clip-rule=&quot;evenodd&quot;/&gt;
            &lt;/svg&gt;
            Archive
          &lt;/a&gt;
          &lt;a href=&quot;#&quot; class=&quot;group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
            &lt;svg class=&quot;mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
              &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z&quot; clip-rule=&quot;evenodd&quot;/&gt;
            &lt;/svg&gt;
            Move
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class=&quot;border-t border-gray-100&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;py-1&quot;&gt;
          &lt;a href=&quot;#&quot; class=&quot;group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
            &lt;svg class=&quot;mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
              &lt;path d=&quot;M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z&quot;/&gt;
            &lt;/svg&gt;
            Share
          &lt;/a&gt;
          &lt;a href=&quot;#&quot; class=&quot;group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
            &lt;svg class=&quot;mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
              &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z&quot; clip-rule=&quot;evenodd&quot;/&gt;
            &lt;/svg&gt;
            Add to favorites
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class=&quot;border-t border-gray-100&quot;&gt;&lt;/div&gt;
        &lt;div class=&quot;py-1&quot;&gt;
          &lt;a href=&quot;#&quot; class=&quot;group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
            &lt;svg class=&quot;mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
              &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z&quot; clip-rule=&quot;evenodd&quot;/&gt;
            &lt;/svg&gt;
            Delete
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and here is my attempt to create that same component (and animation) in a StencilJS tsx class and css file:</p>
  <pre class="lang-js prettyprint-override"><code>import { Component, h, State } from '@stencil/core';
  
  @Component({
    tag: 'animate-ex',
    styleUrl: 'animate-ex.css'
  })
  export class AnimateEx {
      
      @State() isOpen = false;
     
      setIsOpen(isOpen: boolean): void {
          this.isOpen = isOpen;
      }
  
      render() {
         
          return (
              &lt;div id=&quot;tw-dropdown&quot; class=&quot; ml-1/3 mt-5 relative inline-block text-left&quot;&gt;
                  &lt;div&gt;
                      &lt;span class=&quot;rounded-md shadow-sm&quot;&gt;
                          &lt;button type=&quot;button&quot; onClick={() =&gt; this.setIsOpen(!this.isOpen)} class=&quot;inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150&quot; id=&quot;options-menu&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;true&quot;&gt;
                              Options
                              &lt;svg class=&quot;-mr-1 ml-2 h-5 w-5&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
                              &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z&quot; clip-rule=&quot;evenodd&quot;/&gt;
                              &lt;/svg&gt;
                          &lt;/button&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
  
                  &lt;div id='TRANSITION_HERE' class={(this.isOpen?'show transition ease-out duration-100 transform opacity-100 scale-100 ':'hide transition ease-in duration-75 transform opacity-0 scale-95 ')+'drop-down-content origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg'}&gt;
                      &lt;div class=&quot;rounded-md bg-white shadow-xs&quot; role=&quot;menu&quot; aria-orientation=&quot;vertical&quot; aria-labelledby=&quot;options-menu&quot;&gt;
                          &lt;div class=&quot;py-1&quot;&gt;
                              &lt;a href=&quot;#&quot; class=&quot;group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
                                  &lt;svg class=&quot;mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
                                      &lt;path d=&quot;M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z&quot;/&gt;
                                      &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z&quot; clip-rule=&quot;evenodd&quot;/&gt;
                                  &lt;/svg&gt;
                                  Edit
                              &lt;/a&gt;
                              &lt;a href=&quot;#&quot; class=&quot;group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
                                  &lt;svg class=&quot;mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
                                      &lt;path d=&quot;M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z&quot;/&gt;
                                      &lt;path d=&quot;M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z&quot;/&gt;
                                  &lt;/svg&gt;
                                  Duplicate
                              &lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;border-t border-gray-100&quot;&gt;&lt;/div&gt;
                          &lt;div class=&quot;py-1&quot;&gt;
                              &lt;a href=&quot;#&quot; class=&quot;group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
                                  &lt;svg class=&quot;mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
                                      &lt;path d=&quot;M4 3a2 2 0 100 4h12a2 2 0 100-4H4z&quot;/&gt;
                                      &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z&quot; clip-rule=&quot;evenodd&quot;/&gt;
                                  &lt;/svg&gt;
                                  Archive
                              &lt;/a&gt;
                              &lt;a href=&quot;#&quot; class=&quot;group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
                                  &lt;svg class=&quot;mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
                                      &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z&quot; clip-rule=&quot;evenodd&quot;/&gt;
                                  &lt;/svg&gt;
                                  Move
                              &lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;border-t border-gray-100&quot;&gt;&lt;/div&gt;
                          &lt;div class=&quot;py-1&quot;&gt;
                              &lt;a href=&quot;#&quot; class=&quot;group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
                                  &lt;svg class=&quot;mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
                                      &lt;path d=&quot;M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z&quot;/&gt;
                                  &lt;/svg&gt;
                                  Share
                              &lt;/a&gt;
                              &lt;a href=&quot;#&quot; class=&quot;group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
                                  &lt;svg class=&quot;mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
                                      &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z&quot; clip-rule=&quot;evenodd&quot;/&gt;
                                  &lt;/svg&gt;
                                  Add to favorites
                              &lt;/a&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;border-t border-gray-100&quot;&gt;&lt;/div&gt;
                          &lt;div class=&quot;py-1&quot;&gt;
                              &lt;a href=&quot;#&quot; class=&quot;group flex items-center px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900&quot; role=&quot;menuitem&quot;&gt;
                                  &lt;svg class=&quot;mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500 group-focus:text-gray-500&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;currentColor&quot;&gt;
                                      &lt;path fill-rule=&quot;evenodd&quot; d=&quot;M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z&quot; clip-rule=&quot;evenodd&quot;/&gt;
                                  &lt;/svg&gt;
                                  Delete
                              &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
    }
  
  }
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.hide {
    display: none;
  }
  </code></pre>
  <p>The <code>div</code> with <code>id</code>=<strong>TRANSITION_HERE</strong> is where, I think, the transition goes, but I can't determine what is meant by <em>entering</em>/<em>leaving</em> here, and the only references I can find are for Vue and React frameworks, which I'm not using.</p>