[css-view-transitions-2] Distinguish between old and new DOM in CSS #9424
Description
#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:
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:
: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.