Re: [csswg-drafts] [css-view-transitions-2] Syntax for customizing transitions based on their type (#8960)

Proposal to be discussed at TPAC:

## Proposed syntax

Using a set of idents and a pseudo class, like this:

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

```css
html:active-view-transition(main-page-slide product-expand) .hero-image {
  view-transition-name: hero;
}
```

So we pass a set of class names when starting a view transition, and those classify the view transition from that point until the transition is finished. The `active-view-transition` pseudo class selector is activates when there is an active transition which has this classes.

## Some reasons for this direction

1. See [these use cases](https://github.com/w3c/csswg-drafts/issues/8960#issuecomment-1688622403): a single indent is cumbersome to use and doesn't fit the use cases, and a dictionary feels like an overkill. Using a set feels consistent with CSS classes and familiar for that reason.
2. Using a pseudo-class is compatible with the vision of element-scoped transition: we put a pseudo-class on the HTML element now, but later when a transition can be element-scoped it can be a pseudo-class on that element
3. Thinking in terms of *transition types* rather than *page types* is more flexible and suitable to the mental model: for page types we can anyway set regular classes on the DOM, what we're adding here is an *ephemeral* class that exists only in CSS-land, suggesting that people use names that curate the transition: `slide-in`, `expand-product` etc rather than names that describe pages.

## To be discussed:
- Are we good with this direction?
- Bikeshed: classNames? transitionSet? scene? type?
- Logical operators inside the pseudo-class function: match all vs. match any? Maybe comma-separated means `or` and space-separated means `and`?
- Future: how this works with the MPA opt-in. It's a separate discussion and we don't want to overload this one, but we have some idea about it.


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


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

Received on Wednesday, 6 September 2023 16:20:10 UTC