[csswg-drafts] [css-view-transitions-2] Distinguish between old and new DOM in CSS (#9424)

khushalsagar has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions-2] Distinguish between old and new DOM in CSS ==
https://github.com/w3c/csswg-drafts/issues/8960 adds the capability to add custom names to identify the transition which can then be used to conditionally apply styles. But it doesn't provide a way to specify whether a style rule applies only to the old DOM in a transition or only to the new. For example, with the following script:

```js
document.startViewTransition({
  update: updateTheDOMSomehow, 
  classNames: ["main-page-slide"]
});
```

`:active-view-transition(main-page-slide` will apply from when startViewTransition is called to when the transition finishes. If you want add a name to an element in the old DOM but not in the new DOM, that still needs to be managed in script.

One way to solve this is UA supplied class names: "--old" and "--new". Such that `:active-view-transition(--old)` applies after startVT is called and until the update callback is dispatched. `:active-view-transition(--new)` applies when the update callback is dispatched and until the transition finishes. Then authors could combine this with their own class names:

```css
:active-view-transition(main-page-slide):active-view-transition(--old) {
   /* Only applies to the old DOM.
}

:active-view-transition(main-page-slide):active-view-transition(--new) {
   /* Only applies to the new DOM.
}
```

@noamr FYI.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9424 using your GitHub account


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

Received on Thursday, 28 September 2023 18:17:40 UTC