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

I would pass in the parameter to `document.startViewTransition()` using a property bag, as maybe alter some more parameters might be needed:

```js
document.startViewTransition(updateTheDom, {
  type: 'back',
});
```

I like the idea of adding a parameter to the pseudos, but was thinking towards reusing the qualified name syntax for it, as that would not break the existing syntax:

```css
::view-transition-old(*) {
  animation-name: slide-out-to-left;
}
::view-transition-new(*) {
  animation-name: slide-in-from-right;
}

/* Respond to the “back” type of transition, by setting that type as a prefix to the argument */
::view-transition-old(back|*) {
  animation-name: slide-out-to-right;
}
::view-transition-new(back|*) {
  animation-name: slide-in-from-left;
}

```

Or maybe have it as an argument to the `::view-transition` pseudo, where the author would then need to nest the other pseudos:

```css
/* Respond to the “back” type of transition, by setting that type as the name to the enclosing ::view-transition() pseudo */
::view-transition(back) {
  ::view-transition-old(*) {
    animation-name: slide-out-to-right;
  }
  ::view-transition-new(*) {
    animation-name: slide-in-from-left;
  }
}
```

In this last syntax, only the `::view-transition` pseudo accepts a type, the other pseudos need a `view-transition-name` as their argument (or `*`).

One other idea that was floated was to use an at-rule for this, but as @khushalsagar [already mentioned](https://github.com/w3c/csswg-drafts/issues/8960#issuecomment-1602907772) _“Media queries are globally applied on the Document so are not a good fit for scoped transitions.”_ The syntaxes proposed here are not affected by it, as one can prepend the scoping element to the selector, e.g. `:root::view-transition(back)`.

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


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

Received on Tuesday, 8 August 2023 21:02:51 UTC