Classes add/remove order breaks Tailwind UI examples

[simonc]

Hi there,

I spent some time figuring out an issue while trying to use ember-css-transitions with an example from Tailwind UI.

I copied the code from their site and the comment stated the following:

<!--
  Dropdown menu, show/hide based on menu state.

  Entering: "transition ease-out duration-100"
    From: "transform opacity-0 scale-95"
    To: "transform opacity-100 scale-100"
  Leaving: "transition ease-in duration-75"
    From: "transform opacity-100 scale-100"
    To: "transform opacity-0 scale-95"
-->

So naturally what I did was the following:

{{#if this.isOpen}}
  <div
    class="... some tw classes ..."
    role="menu"
    aria-orientation="vertical"
    aria-labelledby="menu-button"
    tabindex="-1"
    {{css-transition
      enterActiveClass="transition ease-out duration-100"
      enterClass="transform opacity-0 scale-95"
      enterToClass="transform  opacity-100 scale-100"
      leaveActiveClass="transition ease-in duration-75"
      leaveClass="transform opacity-100 scale-100"
      leaveToClass="transform opacity-0 scale-95"
    }}
  >
    {{!-- content here --}}
  </div>
{{/if}}

And for some reason the opacity change was working but not the scaling.

It took some investigation but I believe that the part of the code that adds/removes classes breaks this as it adds the leaveToClass and then removes the leaveClass. Since transform is present in both, it gets removed and the scale is thus not applied.

See https://github.com/peec/ember-css-transitions/blob/master/addon/modifiers/css-transition.js#L218-L219

I don't know if there's any risk of introducing a bug by reversing the order but I think it would solve this.

In the mean time the simple workaround is to move transform to leaveActiveClass but I preferred opening an issue as it's pretty counter-intuitive.

Thanks for this addon. Let me know if I can be of any help.

❤️