Animate text changes when Liveview push an update

I’m doing something like this and my approach is used the phx-hook ( mounted, beforeUpdate, updated) to update the element styles.
Please refer to the session JS Interop and client-controlled DOM at Phoenix LiveView HexDocs.

Just add an HTML class to the new elements, so you can target it with CSS and make them flash with a CSS animation. You can look at this example. Note that only CSS is needed: the JavaScript part in the example is just there to append a new element with an HTML class of flash when clicking on the “add” button, but you would do that with LiveView.

It doesn’t replay the animation if you update the same element in the current LV connection, I think, since the class was already placed on the earliest update.

One way to fix this is have the LV send itself a message Process.send_after(self(), :clear_flash, 500) right before returning assigns. The 500 ms delay is so the animation can finish, which is slightly smelly but probably good enough for many cases.

What I’d really like to do is make the removal 100% synced with the animation finishing.

Other approaches I haven’t tried:

1. CSS animation finishes and triggers a state update somehow? Probably hacky.
2. LV/JS bindings/commands?
3. Alpine.js or similar?