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)

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.

.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), 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 [selectors-4] Add syntax to establish before-change style for css-transitions on new elements. #8174), though this would be inconsistent with @starting-style and would likely suffer from the same issues that led to it becoming an @-rule