- From: matthias-margin via GitHub <sysbot+gh@w3.org>
- Date: Fri, 06 Jan 2023 00:10:18 +0000
- To: public-css-archive@w3.org
Could you apply both a class and a name at the same time? If so this may be enough. Given this transition:
From HTML:
```
<img style="view-transition-class: video; view-transition-name: v123abc" />
<img style="view-transition-class: video; view-transition-name: v456def" />
```
To HTML:
```
<video class="video-player" style="view-transition-class: video; view-transition-name: v123abc" />
```
The transition would generate these pseudo-elements?
```
::view-transition
├─ ::view-transition-group(root)
│ └─ ::view-transition-image-pair(root)
│ ├─ ::view-transition-old(root)
│ └─ ::view-transition-new(root)
└─ ::view-transition-group(.video 123abc)
│ └─ ::view-transition-image-pair(.video 123abc)
│ ├─ ::view-transition-old(.video 123abc)
│ └─ ::view-transition-new(.video 123abc)
└─ ::view-transition-group(.video 456def)
└─ ::view-transition-image-pair(.video 456def)
└─ ::view-transition-old(.video 456def)
```
Which could be targeted with this CSS:
```
::view-transition-old(.video) { /* default transition out animations */
::view-transition-old(.video):has(+ ::view-transition-new) { /* transition out for matching element */ }
```
Does this look right?
--
GitHub Notification of comment by matthias-margin
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8209#issuecomment-1372957343 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 6 January 2023 00:10:20 UTC