x-transition:enter.duration adding "display:none"

[hrishikesh-k]

Hello!

This looks like something I'm missing, or a bug.

I'm using Tailwind classes in my x-transition and thus, I wanted to match the duration of the transition class with the duration used by Alpine.

So, I did this:

<div
  x-data="{open:false}">
  <button
    @click="open=!open">Toggle</button>
  <section
    x-show="open"
    x-transition:enter.duration.300ms
    x-transition:enter-start="opacity-0 translate-y-10"
    x-transition:enter-end="opacity-100 translate-0"
    x-transition:leave.duration.300ms
    x-transition:leave-start="opacity-100 translate-0"
    x-transition:leave-end="opacity-0 translate-y-10"
    class="duration-300 ease-in-out h-20 transition-transform w-20"
    style="backgound:cadetblue">
    <p>Foo</p>
  </section>
</div>

However, as soon as I add x-transition:enter.duration.300ms, Alpine automatically adds display:none to the element after the duration I specify there. I remove that line and the style is not added.

Here's a Codepen: https://codepen.io/hrishikeshk/pen/VwMRNyR

Have I not understood the concept of transition duration in Alpine correctly?

[SimoTod]

If you use css classes, alpine already uses the duration defined by your rules. The modifier is just for the simple default animation.

[SimoTod]

See https://alpinejs.dev/directives/transition#applying-css-classes

[hrishikesh-k]

How does Alpine know when to change the CSS classes? There must be something that tells Alpine that the enter or the leave phase has completed and now the classes should change. From my understanding, this would require the duration modifier unless Alpine extracts it from the CSS classes.

Sorry, I'm just trying to understand how it's working because without the duration modifier, my transition seems weird, which is why I ended up adding the modifier.

[hrishikesh-k]

I was experimenting more with my actual code and you're probably right. It does seem to be based on my own class duration and those modifiers are probably not needed.

But, if you could still answer the question of how it works, that would be great just to solve my curiosity. No problem if not, as the original question of this discussion has been answered. Thank you so much!

[SimoTod]

it reads the duration value here -> https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/directives/x-transition.js#L277
and sets a js timeout accordingly

[hrishikesh-k]

Ah computed styles, of course! Thank you once again!