[css-view-transitions-2] CSS only way to transition between list <-> detail views #8209
Description
Currently, the spec only adds one new CSS property for all elements view-transition-name. 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?