LiveView: Are there any clever techniques to do 'removal' animations?

Hi everyone!

I am working on a small LiveView application that drives the HTML using LiveView and animates the HTML tags using CSS.

One problem is how to handle ‘removal’: If we have a list of things, and one of the elements is removed, LiveView renders the HTML with one element now missing.

An element disappearing from HTML alltogether is something that CSS cannot handle. This situation of course is not specific to LiveView. Any situation in which you e.g. want to ‘fade out’ an element when it is removed requires you to first fade it out, and only remove it from the DOM once this effect has finished.

The ‘quick and dirty’ solution would be to add extra logic to the LiveView application that only destroys an element some time (e.g. a second) after it is ‘removed’ from the actual business domain model, and in the meantime adds e.g. a ‘fade-out’ class to it.

However, when you do that you are tightly coupling your model representation (the animation logic) with your business domain logic.

I can think of one other approach, which would be to add an extra layer somewhere in-between (your code driving) LiveView and the DOM (or the location at which the DOM diffing occurs), that does above work for you whenever you remove an element in your business domain representation.
I am not convinced that this is the right approach, however.

This situation has probably been encountered by other people before, for instance during the Phoenix Phrenzy contest. Any suggestions on how to do this cleanly? :slight_smile:

2 Likes

In Drab I would set a “removing” class on the element, which CSS would then make fade out over 250ms, then drab after 250ms (so roughly corresponding to when the fadeout finished) would then just delete the attribute, it was a simple helper function. (As an aside, the container’s I used had animations on resize too so the container would resize out when that happened).

I also had a swap that would ‘overlap’ two elements via CSS and fade one in while fading the other out, then I’d remove the faded out one.

I’d imagine a similar thing could be done in liveview, just send a message to yourself after the delay and then remove the element after first setting the CSS class before sending the message. Or could use a javascript thing to do it.

3 Likes

Yes, a time delay is the only way I can think of to do it.

Hopefully someday, LiveView could have built-in support for list transitions, like Vue, which makes things very simple: https://vuejs.org/v2/guide/transitions.html#List-Transitions

3 Likes