[csswg-drafts] [css-animation][css-selectors] Addition of :removed pseudo-class and :finished functional pseudo-class (#7272)

benfrain has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-animation][css-selectors] Addition of :removed pseudo-class and :finished functional pseudo-class ==
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:

```css
.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':

```css
.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 ?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7272 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 12 May 2022 10:15:34 UTC