[csswg-drafts] [css-shared-element-transitions-1] CSS only way to transition between list <-> detail views (#8209)

matthias-margin has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shared-element-transitions-1] CSS only way to transition between list <-> detail views ==
Currently, the spec only adds one new CSS property for all elements [view-transition-name](https://drafts.csswg.org/css-view-transitions-1/#view-transition-name-prop). This results in some awkward JS required to support transitions between a list view (of video thumbnails for example) and a detail view (of a video player) that has to add the right `view-transition-name` to the clicked thumbnail for transition into the detail view, and find the right thumbnail based on the video view.

The list <-> detail views are a common enough use case that I think it warrants a way to address this in the API directly. One way this could be done in just CSS today would be to define a different `view-transition-name` for each element in the list and then use the same one for its detail view.

```
// index.html
<img class="video-thumbnail" style="view-transition-name: video-1" />
<img class="video-thumbnail" style="view-transition-name: video-2" />
<img class="video-thumbnail" style="view-transition-name: video-3" />

// detail-2.html
<video class="video-player" style="view-transition-name: video-2" />
```

This works fine if you can rely on the default transition, but if you want anything else, then you'll have to start adding rules for each of the transition names. This is not very scalable or desirable:

```
::view-transition-old(video-1),
::view-transition-old(video-2),
::view-transition-old(video-3) { ... }

::view-transition-new(video-1),
::view-transition-new(video-2),
::view-transition-new(video-3) { ... }
```

# proposal

Introduce a new `view-transition-id` that can be paired with `view-transition-name` to target and generate animations. CSS could then be written to target combination of name, name/id or name/any id. Eg:

```
// index.html
<img class="video-thumbnail" style="view-transition-id: 1" />
<img class="video-thumbnail" style="view-transition-id: 2" />
<img class="video-thumbnail" style="view-transition-id: 3" />

// detail-2.html
<video class="video-player" style="view-transition-id: 2" />

// css 
.video-thumbnail {
  view-transition-name: video
}
.video-player{
  view-transition-name: video
}

// define transition for all video views
::view-transition-old(video) { ... }
::view-transition-new(video) { ... }

// define transition for the video view that has a matching new view
::view-transition-old(video matched) { ... }
::view-transition-new(video matched) { ... }

// define transition for video with specific id
::view-transition-old(video #1) { ... }
::view-transition-new(video #1) { ... }
```

The UA would then have enough information to know how to animate the specific thumbnail into the video without needing any custom JS.

Obviously the exact syntax can be different than what I propose here. The important part is to have a way to match a "class" of elements, but still be able to differentiate them during the animation based on a unique id.

Thoughts?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8209 using your GitHub account


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

Received on Friday, 9 December 2022 00:15:08 UTC