Hi there, I’m adding an animation to an existing DOM object. To do so I use JS.transition to add a temp CSS class, the call is initiated from the server with a push_event. Everything looked fine at first, with default 200ms transition time. But it was not long enough since the animation lasts several seconds. It needs 4s to complete the animation. So I bumped the transition time to 4000. It is all nice now, only Liveview is frozen during 4s. It will buffer user clicks for that duration and then will proceed. I can’t have a frozen UI for 4s of course. Do you know if there is a way around this behavior without breaking the “DOM awareness” of JS.transition ?
I think you will have to write a hook and apply the transitions yourself, either in updated() or in a handleEvent handler.
See also the docs on that linked page for AlpineJS which describes how to copy attributes across updates, which you might want to do to flag “in-transition” elements?
One quirk I noticed is that updated is run even when the dom diff doesn’t effect that element, not sure if that is a bug but you’ll have to watch out for it. edit: in some cases, at least when you have phx-mounted attached.
Probably you could also have multiple/nested liveviews, I think they probably both block their JS independently.
Hi, I ended up using greensock GSAP libraries. They play along well with LiveView and handle well animation interruptions. I basically fire event from server with push_event, catch on the client with code declared in app.ps Example :
Just chiming in to say I hit this issue as well! It makes using the JS.transition (or show/hide with transition option) a no-go with longer animations. I’d love to find a workaround without needing to go to an external library.
Liveview is frozen during 4s. It will buffer user clicks for that duration and then will proceed.
