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.