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

This would be *excellent*. The ability to animate an element as it ultimately leaves the DOM has been janky forever. 

I could be mistaken, but I think you can do this already with View Transitions, something to the tune of:

```
Element.style.viewTransitionName = "unique-outgoing-ident";
Element.remove();
```

Then in CSS if you want control...

```
::view-transition-old(unique-outgoing-ident) {
  animation: outgoing 1s;
}
```

[This example](https://codepen.io/chriscoyier/pen/BaPLzGq) does that for list items "on the way out" of the DOM. 

> We would either need to delay the actual removal until the transition finishes, which seems to open a can of worms

I think the View Transitions thing avoids the "can of worms" because it still immediately removes the element from the DOM, and the animation takes place on a rasterized visual version of the element, right? 

Still, I think `@exit-style` is a more elegant API than View Transitions, because:

1. The pairing with `@starting-style` is sensible.
2. You need JS to make View Transitions work because the "outgoing" elements need entirely unique idents otherwise the transitions don't work at all. Plus, if the elements have "incoming" view transitions, you need to swap out the ident to a different one so it can have a different animation, which seems awkward. Seems like a concern best left to CSS alone.
3. It could automatically trigger on situations other than leaving the DOM, as Jessica notes, like when an element becomes `display: none;`


-- 
GitHub Notification of comment by chriscoyier
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9500#issuecomment-1773019019 using your GitHub account


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

Received on Friday, 20 October 2023 16:11:57 UTC