Confusing x-transition docs or just me?

[jslvtr]

Doing a few things with x-transition, and I think I'm learning some things that aren't present in the docs. Wondering whether I've missed stuff in the docs?

<div class="fixed inset-0 bg-gray-900/80 ease-linear"
      x-show="open"
      x-transition.opacity
      x-transition.duration.300ms></div>

The docs suggest that "If you wish to only apply the opacity transition (no scale), you can accomplish that [with x-transition.opacity]".

I believe that means the above should only transition the opacity, but it transitions both scale and opacity.

The fix is to use x-transition.opacity.duration.300ms but I don't see that clearly in the docs.

This:

<div class="relative mr-16 flex w-full max-w-xs flex-1"
      x-show="open"
      x-transition:enter="transition ease-in-out transform"
      x-transition:enter-start="-translate-x-full"
      x-transition:enter-end="translate-x-0"
      x-transition:leave="transition ease-in-out transform"
      x-transition:leave-start="translate-x-0"
      x-transition:leave-end="-translate-x-full"
      x-transition.duration.300ms>

I would expect to set the transition duration to 300ms, but instead it just breaks everything. Should the docs mention that you can't use :enter and other : classes with plain x-transition?

[SimoTod]

Frel free to send a PR to update the doc if you feel it can be improved.

In your example, you are applying multiple transition directives (one that only transition the opacity and another one that transitions everything but has a duration). They'll both apply at the same time wnd conflict so the final result will not be what you expect.
Same for the one with enter and leave.

[jslvtr]

Sounds good, I'll send a PR! Just wasn't sure if I was missing something or it could be a little clearer. Thanks!

[ekwoka]

You would just do x-transition.opacity.duration.500ms

You have two ways: a single x-transition with modifiers, or the multi property one with enter leave start end etc

[jslvtr]

I've added a small PR to add more detail to the docs, I feel like it would've helped me understand this better. #4061