- From: Khushal Sagar via GitHub <sysbot+gh@w3.org>
- Date: Thu, 15 Jun 2023 15:28:29 +0000
- To: public-css-archive@w3.org
A pattern I saw from @jakearchibald which seemed like the easiest/most performant way to do this was using class names on html. When calling startViewTransition, you should know the type of transition. Let's call it type. Add a class corresponding to this type to html for the lifetime of the transition. And then all the CSS is gated on checking whether html has that class.
Script
```js
function doTransition(type, updateCallback) {
document.documentElement.classList.add(type);
let transition = document.startViewTransition(updateCallback);
transition.finished.then(() => {
document.documentElement.classList.remove(type);
});
}
```
CSS
```css
:root.type ::view-transition-old(foo) {
...
}
```
Would that work?
--
GitHub Notification of comment by khushalsagar
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8960#issuecomment-1593291887 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 15 June 2023 15:28:31 UTC