Re: [csswg-drafts] [css-view-transitions-2] CSS only way to transition between list <-> detail views (#8209)

I thought a bit about this in https://github.com/WICG/view-transitions/issues/205 but in relation to box-reordering.

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:

---

```css
.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`.

---

```css
::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.

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


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

Received on Tuesday, 17 January 2023 09:04:56 UTC