Fix attempt for race condition in JS.show()

[silverdr]

Attempted fix for issue: #3456

Please note that I am not familiar with the codebase and cannot be sure that this is the "correct" way to address the issue.

Description:

When trying to use JS.hide() / JS.show() with animated transitions, there is a race condition in JS.show(), between applying display: <value> and the transition class(es). As a result the transition flow can be disturbed.

example video showing the problem:

https://cld.silverdr.com/s/z8KbZkCDGw8Ffyx

for

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

and transition CSS:

@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;
}

Relevant elixirforum.com thread:

https://elixirforum.com/t/liveview-js-show-hide-race-condition/66405/