[csswg-drafts] [css-transitions-2] Exit animations (`@exit-style`) (#9500)

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

== [css-transitions-2] Exit animations (`@exit-style`) ==
## Problem statement
Elements are often removed from the DOM, either via JS (`element.remove()` etc), or by applying `display: none` to them. Some common examples: deleting items from lists, toasts, dismissing dialogs and popovers, etc.

Current solutions:
Listening to the `animationend` or `transitionend` event, filtering by the right transition/animation, and then removing the element
Setting a timeout, and manually matching the animation or transition duration and then removing the element after that timeout fires
Two CSS animations, one for the exit style, and one for applying `display: none` (using a transition for the latter [wouldn't work](https://codepen.io/leaverou/pen/ExrYyZG))

All of these solutions are too heavyweight, and most require additional JS and possibly the allocation of an event listener which is a perf overhead.
## Proposed solution

In #8174 the group added `@starting-style`, to solve the reverse of this problem and make it easier to specify entrance transitions. Something analogous to that, such as `@exit-style` (name TBB) would complement it nicely.

```css
.posts {
  > li {
    transition: .4s opacity;

    @exit-style {
      opacity: 0;
    }
  }
}
```

Other potential names: `@ending-style`, `@remove-style`, `@exiting-style`, `@removing-style`

If renaming `@starting-style` would not cause compat issues (it [just shipped in Blink and it has not shipped anywhere else](https://caniuse.com/mdn-css_at-rules_starting-style)), we could name them as a pair:
`@start-style` / `@end-style`
`@entrance-style` / `@exit-style` 

Additionally, if there is a way to specify *both* entrance and exit styles, this simplifies a lot of other interactions that are technically neither, e.g. moving elements around.
## Other solutions
- View transitions could solve this problem (just like entrance animations), but this offers a higher level, portable primitive that can be used directly from CSS and is not subject to cross-origin restrictions.
A pseudo-class (per the initial proposal in #8174), though this would be inconsistent with `@starting-style` and would likely suffer from the same issues that led to it becoming an @-rule 


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


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

Received on Thursday, 19 October 2023 18:53:57 UTC