[css-animation][css-selectors] Addition of :removed pseudo-class and :finished functional pseudo-class

[benfrain]

First time here, hope I did this right!

In JS we have WAAPI with finished to enable further actions after an animation completes.

In addition, a common scenario when building on the web is needing a piece of animation to occur when an element needs to be removed from the DOM. Think of deleting an item from a list; rather than an instant geometry shift, a gradual removal is often preferable.

I hope to see a mechanism to accomplish those things in CSS.

The :removed pseudo-class

If an element is removed from the DOM it is immediately inert but visually runs this animation first.

Suggested syntax:

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

Maybe it makes more sense to be a functional pseudo-class and only an animation is passed in??

The :finished functional pseudo-class

Would enable us to chain animations without the difficulty of trying to time delays etc. Maybe it could look like this, where the argument passed in is the name of a keyframe, if that set of keyframes is applied via an animation (of any duration), when that keyframe ends the selector is 'valid':

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

More background here: https://benfrain.com/the-removed-pseudo-class-and-finished-functional-pseudo-class-that-i-wish-we-had/

Perhaps related to #6687 ?

[Loirooriol]

CSS selectors match elements in the current DOM. If an element has been removed from the tree, then the pseudo-class won't match.

Instead of removing it, I guess you could add a removing class and then use

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

and when the animation finishes you can remove it for real.