LiveView JS.show/hide. Race condition?

Phoenix Forum Questions / Help
, ,
1

I try to implement “show fancy” and “hide fancy” as in examples in the fine docs of Phoenix.LiveView.JS. While I seem to have no problems with hide and it always seem to behave correctly [^1], the show part is problematic. More often than not (but not always) the element first pops-up and only then starts the CSS animation. Now, if I understand correctly, this works by setting display: block and applying the transition class for the duration given in time:. My guess is that there might be a race condition between applying display: block (which causes the element to show prematurely) and applying the transition CSS class, which then starts the animation.

Any existing cures for this type of problem? Or am I doing something wrong?

[^1] - once I added time: 750 - CSS animation is theoretically set to 200ms but in practice the element used to disappear before the animation finished.

2

I have also noticed this issue in Firefox but not in Chrome.

And the last time I checked, I didn’t see it in Firefox either (which lends credence to your suggestion that it’s a race condition).

3

Thank you for confirming. I noticed it in all (three major) browsers. Very similar in all cases.

Here’s a screen recording

4

FWIW (in case someone might notice an error there) - the trigger is:

phx-click={JS.show(to: "#window-title-window", transition: "fade-in-scale", display: "flex")}

And the “fancy” CSS is defined as:

@keyframes fade-in-scale {
	0% {
		transform: scale(0.4) translateY(25px);
		opacity: 0;
	}

	90% {
		transform: scale(1.05) translateY(-3px);
		opacity: 0.9;
	}

	100%{
		transform: scale(1.0) translateY(0px);
		opacity: 1;
	}
}

.fade-in-scale {
	animation-direction: normal;
	animation-duration: .2s;
	animation-fill-mode: forwards;
	animation-name: fade-in-scale;
}