JS.transition blocks Liveview until time has elapsed

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 :

window.addEventListener("phx:gsap", ({ detail }) => {
    var tl = gsap.timeline();
    tl.from(detail.zoom, { scale: 1, duration: 0.7 })
    tl.fromTo(detail.zoom, { scale: 1.3 }, { scale: 1, duration: 1 })
    tl.fromTo(detail.wiggle, { opacity: 0, scale: 2 }, { opacity: 1, scale: 1, duration: 0.5, repeat: 1 });
})

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.

It’s certainly horrible.

LiveSvelte is made for this, a disappearing framework, no bloat, powerful animation support which can be trivially embedded in your liveview pages.