Re: [csswg-drafts] [css-view-transitions-2] CSS only way to transition between list <-> detail views (#8209)

@jakearchibald had an idea which came up in the context of MPA API exploration that could be relevant here. Having a global name for the Document (or DOM state in the SPA case) that can be used as a CSS media query to conditionally name things. Super rough sketch:

```js
// When navigating from index to details page.
document.startViewTransition(updateCallback, {old-state: "index", new-state: "item1"});

// When navigating back from details page to index.
document.startViewTransition(updateCallback, {old-state: "item1", new-state: "index"});
```

Which can then be used in CSS on the index page to apply names:
```css
/* Only name this item if we're navigating to/from this item's details page */
@media (view-transition-new-state: item1) {
   view-transition-name: item;
}
@media (view-transition-old-state: item1) {
   view-transition-name: item;
}
```

I'm assuming setting the old-state/new-state when calling startViewTransition is feasible since updateCallback is bound to know where the navigation is going.

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


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

Received on Thursday, 9 March 2023 18:16:13 UTC