Re: [csswg-drafts] [css-view-transitions-2] Creating 'classes' of transition groups (#8319)

> This is problematic from the current spec perspective. Specifically, things like step 3.9.5 of [pseudo element set up algorithm](https://www.w3.org/TR/css-view-transitions-1/#setup-transition-pseudo-elements-algorithm) uses the name to generate a dynamic style sheet targeting ::view-transition-group(name) and set up specific transitions for that element. If that pseudo class now represents a group of elements, then we can't distinguish them for transform (etc) set up.

+1. We need some way for UA CSS to target the element. We can define something magical internally but doesn't seem like that's necessary.

> My thought is that presence of view-transition-group on its own should match to itself by generating some unique name (spelled out in the spec) something like ua-group-${group}-${index} where group is the group name and index is a unique number. Then the selection would have to have a different pseudo class or format: view-transition-group(*):group(groupname)?

I like this direction. Ideal would be if this new CSS property also helps you target a set of generated pseudo-elements. So something like:

```
.foo {
   view-transition-class: target;
}

.bar {
   view-transition-class: target;
   view-transition-name: my-element;
}
```

In the example above, the UA computes a `view-transition-name` using the class for foo. Authors can query the name using `getComputedStyle()` if they need to add custom animation for any particular node. For bar, the specified `view-transition-name` is used. But in both cases, the class can be used to apply styles.

```
::view-transition-group(*):class(target) {
   ...
}
```

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


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

Received on Thursday, 5 October 2023 17:31:03 UTC