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

Thanks for the use case!

Curious: what happens inside your `updateTheDomSomehow`? Isn't there somewhere where you change the current view from being `search` (a) to being `details` (b) in the DOM?

I would guess something like the following:
(using search and details instead of a/b, helps me feel closer to the use-case, hope that's ok)

JS:
```js
function transitionToDetails() {
  // mainPageSlide.dataset.current === "search"
document.startViewTransition({
   update: () => {
      // Start a react chain that ends up doing a lot of stuff but also:
     mainPageSlide.dataset.current = "details";
   },
   classNames: ["main-page-slide"]
});
}
```

CSS:
```css
html:active-view-transition(main-page-slide) {
  .main-page-slide {
     &[data-current=search] { --screen-search: screen; }
     &[data-current=details] { --screen-details: screen; }
  }
}
```

Note that having this old/new feature would allow "ghost" view transitions - running a whole transition without changing the DOM at all by responding to class names + old + new. Not sure if this is a bug or a feature, but it's definitely a bit of an odd side-effect...

In your case what you're trying to do is not a ghost transition, but rather a classic transition to a new state. By using the old/new idiom here, wouldn't you have to define the old/new state twice in some sense?

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


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

Received on Friday, 29 September 2023 06:10:09 UTC