Creating 'classes' of transition groups

https://codepen.io/jaffathecake/pen/VwBprqL

In this example there are lots of boxes. Each has a unique view-transition-name, but each animates in the same way.

In the demo, I'm able to use selectors like ::view-transition-group(*) to target all of them, but that's only because they're the only thing animating. That's unlikely to be the case in the real world.

It'd be nice to have a way to style the animation of all of the boxes at once.

Some ideas:

.box-1 {
  view-transition-name: box-1;
  view-transition-class: box;
  contain: layout;
}

.box-2 {
  view-transition-name: box-2;
  view-transition-class: box;
  contain: layout;
}

::view-transition-group(*, box) {
  /* … */
}

The pseudo-class selector is ::view-transition-group(view-transition-name, view-transition-class). Unlike view-transition-name, many elements can be given the same view-transition-class.

::view-transition-group(*):element-class(box) {
  /* … */
}

(I can't think of a good name for this. I know the current name is bad)

:element-class(ident) matches a view transition pseudo, if either the associated outgoing or incoming element has/had a class of ident.

We could also have :old-element-class(ident) and :new-element-class(ident) to work with classes specifically on the outgoing or incoming element.

WICG / view-transitions

Creating 'classes' of transition groups #205