How does time option in JS.hide work in liveview?

Questions / Help
,
1

I was playing around with JS.hide to add animations when an element gets removed from the DOM(I guess the correct term should be when the element is hidden). And I put 5 seconds for the time option in JS.hide: JS.hide(to: "$some-element", transition: "fade-out", time: 5000). And I observed that the element was still in DOM for 5 seconds, though hidden.

So, does this mean, during the transition, if some event were to happen, and DOM is to be updated, I’ll only be able to see those DOM updated after the transition has finished?

2

I just tried to understand how LiveView.JS works. In js.ex a %JS{} struct is built. Where is this processed?

3

In the front-end. the JS struct is rendered as an HTML attribute value, like:

phx-click="[["dispatch",{"detail":{"input_selector":"#client_config_scheduled_at"},"event":"schedule-now:clicked","to":null}]]"

The structure encodes a series of operations for the front-end to execute when the event (in this case a click event) is triggered.