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?