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

Summarizing additional internal discussion:
Converging around the proposal of a class selector "outside" the pseudo element, e.g. `::view-transition-group(name).class`. 
- The class would apply to both the group and image-pair pseudo-elements
- Any class on either the old or new element would apply to the view transition pseudo-element.
- Selectors with the class name have to be scoped to the pseudo-elements, e.g. `.foo { }` wouldn't select a pseudo-element that corresponds to `::view-transition-group(*).foo`.
- For the `view-transition-old`/`view-transition-new` pseudo-elements, we could apply the respective classes rather than the union. This is TBD.

So, for example, if all the `section` tags in the document would have the same fade-in animation, it could look like this:

```css
section {
  view-transition-class: section-fade-in;
}

::view-transition-group(*).section-fade-in {
  animation-name: fade-in;
}
```

Animating between a link and a header, that might have different classes, would capture both:
```
.link {
  view-transition-class: link;
}

header {
  view-transition-class: header;
}

view-transition-group(*).header { /* this would apply during the entire transition */ }
view-transition-image-pair(*).link { /* this would apply during the entire transition */ }
view-transition-old(*).link {
  /* TBD whether this would apply only when animating from link to header or also from header to link */
}
```






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


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

Received on Tuesday, 24 October 2023 15:24:33 UTC