One thing that always frustrates me on the web platform is that there is no way of animating or transitioning things out of the DOM. This is an important shortcoming when you want to create smooth and polished interfaces.

When something is not in the DOM, and is then inserted, we can run an animation to make it appear smoothly. However, the inverse, in CSS at least, is not possible.

Using the JavaScript WAAPI (great beginner course for that here BTW ;)), we can at least manage something leaving the DOM. If you are controlling the method of removal, you can run an animate() on it and then chain a .finished.then(() =>) and pull it out of the DOM however suits your implementation. However, that can end up being a fair bit of work. Not impossible, you can wrap it up in a utility function, but perhaps not ideal.

The :removed pseudo-class

What I would like to see is a :removed pseudo-class to hang something off in CSS. I’m spit-balling here so there is every chance this is simply impossible, but on the off chance it is, somehow, feasible, it would sure be nice to do this:

.thing:removed {
    animation: fadeOut .2s ease-in-out;
}

And if that element is removed from the DOM it is immediately inert but visually runs that animation first so it appears to be smoothly removing itself.

The :finished functional pseudo-class

Somewhat related, how about we get a :finished pseudo-class? To enable us to chain animations without all the trauma of trying to time delays etc. In my, considered for no more than a minute idea, that could look like this:

.thing {
    animation: fadeIn .2s ease;
}
.thing:finished(fadeIn) {
    animation: bounce .3s linear;
}
.thing:finished(bounce) {
    display: none;
}

And maybe, maybe we even allow an animation when something is ‘removed’ with display: none; We have a function so we could send that in like this:

.thing:finished(display: none) {
    animation: fadeOut .2s ease-in-out;
}

Whaddya think? Would this be useful? Or am I being hopelessly naive in some obvious way? I’m entirely aware that ideas are cheap and reality is the hard part. But still…

Hopefully, someone will tell me this is already underway. Worse, it isn’t but is perhaps possible and interesting. Worst of all – it’s been tried and can’t be done.