x-transition name attribute

[RubenBimmel]

In Vue, transitions automatically apply CSS classes prefixed with the name of the transition. This works great for us because we don't use any CSS framework like Tailwind.

To do something similar in AlpineJS, we now need to write this for every animation:

<div x-show="show"
     x-transition:enter="animation-enter"
     x-transition:enter-start="animation-enter-start"
     x-transition:enter-end="animation-enter-end"
     x-transition:leave="animation-leave"
     x-transition:leave-start="animation-leave-start"
     x-transition:leave-end="animation-leave-end">
      Content
</div>

Suggestion

Add a new attribute that sets all of these classes automatically:

<div x-show="show" x-transition:name="animation">
      Content
</div>

Or even shorter:

<div x-show="show" x-transition="animation">
      Content
</div>