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

@chrishtr 

> I can also see the developer difficulty, but keeping track of a now-gone DOM element and where it used to be until the end of the animation is very difficult/maybe impossible. Even keeping it until the next render and a View Transition can start is hard and in general almost as hard. The alternative of stalling the rendering pipeline to get a screenshot of the pixels for a View Transition is possible, but that comes at a very high cost of forced layout, stalled pipeline, and memory impact.
> 
> OTOH the developer code to do it async would be something like:
> 
> ```
> startViewTranstion(() => { removeNode(); });
> ```

First, it's not quite a one liner, it's more like:

```js
if (document.startViewTransition) {
 await document.startViewTransition(() => { el.remove() }).finished;
}
else {
 el.classList.add("removing");
 await new Promise(r => el.addEventListener("transitionend", r, {once: true}));
 el.remove();
}
```

But that could be abstracted away. More importantly it's about **coupling**.
Yes, if you are the same entity writing the element removal code it's trivial to replace it with a view transition. But that's not usually the case. Authors these days use long pipelines of tooling to do these things, they rarely write DOM element removal code themselves. E.g. I would have no idea where to even start to use a view transition to animate the removal of an element that’s removed via Vue’s `v-if` or a React conditional.

@dbaron 
> One question in this context: how useful to developers is it if the DOM removal is _async_, but still at the start time of the animation (rather than the end).

I think my comment above may reply to this too? If not, could you expand on what you mean a bit more, ideally with a code example?

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


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

Received on Saturday, 28 October 2023 16:26:55 UTC