Issue with x-show Ignoring x-transition.delay and Displaying Immediately

[desvu]

I noticed that x-show removes display: none as soon as the show variable is set to true, ignoring x-transition.delay. Why not add a delay before displaying the element if a delay is specified? This would at least help resolve issues when two toggled elements share a common container.

[ekwoka]

This behavior is how actual css would mostly make it work. You have to have it show otherwise you can't do the transtion.

You can solve the container thing in smarter ways like having them in a single cell grid.

[desvu]

Thank you for the proposed solution, but I was already aware of it in advance. It's a poor option for several reasons:

Absolute positioning forces the element to leave the natural flow.
Simultaneous activation of two transitions looks awful when real UI elements (such as buttons, text, etc.) are involved instead of regular colored blocks. At some point during the transition, they overlap with each other, which looks terrible! Of course, you could use opaque backgrounds, but in my case, that’s more of a half-measure.
It seems I misunderstood the goals of Alpine—it looks like it's a framework for simple things.

[SimoTod]

It's indeed more aimed at doing single things.

About being a poor solution, it's probably an opinion. The timeout solution was poor from my point of view, for example (it's complex, not elegant and it's force you to reinvent what css already does).

As i said, there are probably better solutions than using absolute positioning but I'm not a frontender, the point is that css already gives you the tool to achieve that.

Also, how you handle the transition is up to you. Usually you want the fade to happen immediately and the show to transition gradually from an aesthetic point of view, otherwise the whole animation could annoy the final user by being too slow.

But you can delay the css transition as well once the div are stacked.

As a last resource, if you really love that solution, you can create your own directive that just delay the removal of display none (it's not hard if you look at the documentation) and it's likely to have less bug than forcing an existing directive to do something that is not meant to do.

[desvu]

Thanks for the help! But it seems that the best solution in my case will be to ditch Alpine. It's not even about the transitions; there are more significant issues that I’ll have to deal with. The first thing that comes to mind is performing some actions after closing a modal, because Alpine doesn't support x-transition hooks. I used Alpine + Tailwind for a while — it was an interesting experience! But now I see that, in the end, I'm reinventing the wheel.

[SimoTod]

Yeah, the missing hooks are something many people want. You can hack something with the native browser events but I personally find the transitionend a bit unreliable because Alpine removes the css properties just a tick too early for half of the times so the browser doesn't fire the event. For quick effects, it's probably better to use transitionstart.

For example, https://codepen.io/SimoTod/pen/PoMxVzv does something similar to UIKit but ultimately, you should probably go with what you are more comfortable with and make you more productive, especially if you are the only person working on a project.

[ekwoka]

What do you think, is it possible to replicate this with Alpine.js without any hacks?

Yes.
https://awesomealpine.com/play?share=6ksGkczsDj-5

I'd normally do it like this.

It seems I misunderstood the goals of Alpine—it looks like it's a framework for simple things.

It's not for "simple things", it just is providing simple pieces, to reduce opinion leakage. It's meant as a simple way to hook up reactivity, not something to dictate the way you do everything.

I'm not had any similar issues with doing thing after a modal closes...but I don't just use x-show with divs to make modals, so it might just be how much simpler using dialog elements is.