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

For us we try to declare everything at the site that's triggering a transition. For example we might have the element `screen` that we want to apply a View Transition with. 

**Transition: Search -> Details**
- On Page A, we map `screen` to `--screen-a_container`
- On Page B, we map `screen` to `--screen-b_container`

We would use the new syntax like this:

```css
.main-page-slide {
  &:active-view-transition(main-page-slide):active-view-transition(--old) {
    --screen-a_container: screen;
  }

  &:active-view-transition(main-page-slide):active-view-transition(--new) {
    --screen-b_container: screen;
  }

  // other view transition related configuration for this transition
}
```

```tsx
document.startViewTransition({
  update: updateTheDomSomehow,
  classNames: ['main-page-slide'],
});
```

The main reason is that at Airbnb we're already seeing scaling issues with each component or route needing to know about every transition it needs to participate in. People clobber others or don't want the view-transition-name assigned in a certain instance. We've adopted a semantic naming approach, where instead of the callsite needing to know a name like `screen`, it only needs to assign a value like `view-transition-name: var(--screen-a_container)`. That way it's `none` by default, but when a particular transition needs it, it maps it at the location we call `startViewTransition`.

**Sidenote**: _I'm a bit confused on the naming of `--old|--new` and the repeating of the selector. Would we be able to do `:active-view-transition(main-page-slide --old)` as well? Also just want to make sure there's not potential confusion on the CSS variable route, unless potentially that does set it as well?_

-- 
GitHub Notification of comment by calinoracation
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9424#issuecomment-1740099504 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 22:54:08 UTC