Alpine: x-show with x-transition with quick event may have weird behavior

[dbpolito]

If you fire fast events to show/hide elements with x-transition it ends up hiding. (sorry if it's too vague, i made a jsfiddle to help understand)

https://jsfiddle.net/pgn6om87/

If you see this fiddle example and move the mouse hover/out the button quickly you may reproduce the error.

[ryangjchandler]

Hi @dbpolito, I've just spam hovered the fiddle you provided but couldn't see any problems. The transitions were being interrupted correctly for me. Perhaps someone else can reproduce it on their machine.

[muzafferdede]

i saw the problem, if you do it quick enough, it will be at a stage where nothing displayed. Seems to me transitions are not completed but values are changed so there is a gap between the stages.

I believe it is related to #377

[ryangjchandler]

I'm not sure if it's related to #377 since the transition utility functions run their own class list mutations, they don't run anything through the bind directive.

I'm on my phone atm so can't really try anything out, I'll play around with it tomorrow morning though to see if there's anything obvious, I'll label this as a bug temporarily, unless somebody suggest a fix or notices anything obvious before.

[muzafferdede]

Right, just found out it has its own class switching which is similar to bind.js. Maybe we can consider to create a utility that's switches html classes according to some conditions once we figure out the right logic :).

[SimoTod]

X-Transition has some known difects to address. They become more obvious when you increase the duration. There's an old issue about that (although it's a bit confusing because it mentions several issus) https://github.com/alpinejs/alpine/issues/170#issuecomment-589735942

[ryangjchandler]

@SimoTod would it be worth consolidating all of the x-transition bugs into a single issue for future reference?

[SimoTod]

👍 sounds good to me.

[HugoDF]

Is this solved in 2.4.0 @muzafferdede @SimoTod ?

[muzafferdede]

@HugoDF I did check few and seems not with the latest release. It's weird that it should worked so, i did try it with my refactored PR build and it was working fine with that build. So i am guessing the other PRs ($nextTick related PRs) might cause something. I think worth to take a look.

[SimoTod]

@HugoDF Leave it open for now, please. I can replicate using the original PR ( https://cdn.jsdelivr.net/gh/muzafferdede/alpine@fix-x-show-transition-overlap/dist/alpine.min.js) and the new build.
Other cases seem improved but this mouse events are not perfect.

[muzafferdede]

this was the codepen i created to check if transition issues are fixed or not. It uses latest release of AlpineJS. The original issue still exists.

[SimoTod]

@muzafferdede 👍 the PR improved the situation (other issues are now fixed, like slow transition and click events). mouseevent and mouseleave are still not perfect (I assume because you can trigger them faster so they queue before the timeout call) but it's a smaller use case.

[muzafferdede]

but it's a smaller use case.

i don't get it, this is my use case and i can't use v2.4.0 right now since it still cause target component's state and visibility issues if user clicks fast on the trigger. Right now i use combination of some of your latest PRs and refactored transition PR and its seems fine. Do you think Caleb did mess in somewhere while he release? I can tell 2.4.0 it's improved but not fixed. So should we consider as "transition issues still exists"?

[SimoTod]

@muzafferdede You are using 2.x.x which is still the previous version due to the cdn cache. It takes up to 24h to update, it happens every release.
Try to explicitly request 2.4.0, it should work.

See https://codepen.io/SimoTod/pen/oNbBxNB

[muzafferdede]

@SimoTod , right! I did actually think that and explicitly request 2.4.0 for the #376 but not for my use case since i thought cdn cache is fine. I can confirm my use case is ok with v2.4.0, and yeah, hover issue is hard to replicate but still exists. It is not a considerable issue IMO since we are talking about milliseconds bugs. Let's blame on Javascript :)

[SimoTod]

Some of the overing animations are probably smoother using css only.