Re: [csswg-drafts] How to animate discrete elements using WAAPI? (#11537)

> Notice how the backdrop does not animate on exit.

Pseudo elements need their own animation. For this [use the `pseudoElement` option](https://css-tricks.com/pseudo-elements-in-the-web-animations-api/) when animating.

>  seems the problem is that I can't specify the `overlay` as part of the WAAPI, which is the major difference between the CSS and JS one.

Again, as an author you cannot use the `overlay` property directly, so there is no difference between the things you can do in CSS and JS here.

The only place where you can use it, is to define its transition behavior. This can be done in JS too, as follows:

```js
dialog.style.transition = `overlay ${duration}ms allow-discrete`;
```

I’ve built a demo based on yours that implements all the above: https://codepen.io/bramus/pen/dPbgYgg

However, one thing I did notice is that the entry animation for the `::backdrop` pseudo is not working properly in Chrome _(the exit animation works just fine)_. This is most likely a bug for which I have filed https://issues.chromium.org/issues/391393423. A workaround for this Chrome bug is to wrap the animate-in on the `::backdrop` in a double `requestAnimationFrame` to make sure the element is there.

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


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

Received on Wednesday, 22 January 2025 10:30:25 UTC