- From: Jen Simmons via GitHub <sysbot+gh@w3.org>
- Date: Wed, 27 Mar 2024 15:33:33 +0000
- To: public-css-archive@w3.org
I'm making a simple demo that uses View Transitions to animate enlarging an item that's laid out with CSS Grid, and shifting the other items in the grid around. I was surprised to learn that 1) I have to use JavaScript to use View Transitions, and 2) that I have to give each item in the Grid a unique `view-transition-name`, and there's no mechanism for applying the functionality to all items.
This caused me to have to write this code:
```
.card:nth-child(1) { view-transition-name: card-1; }
.card:nth-child(2) { view-transition-name: card-2; }
.card:nth-child(3) { view-transition-name: card-3; }
.card:nth-child(4) { view-transition-name: card-4; }
.card:nth-child(5) { view-transition-name: card-5; }
.card:nth-child(6) { view-transition-name: card-6; }
.card:nth-child(7) { view-transition-name: card-7; }
.card:nth-child(8) { view-transition-name: card-8; }
.card:nth-child(9) { view-transition-name: card-9; }
.card:nth-child(10) { view-transition-name: card-10; }
.card:nth-child(11) { view-transition-name: card-11; }
.card:nth-child(12) { view-transition-name: card-12; }
.card:nth-child(13) { view-transition-name: card-13; }
.card:nth-child(14) { view-transition-name: card-14; }
.card:nth-child(15) { view-transition-name: card-15; }
.card:nth-child(16) { view-transition-name: card-16; }
.card:nth-child(17) { view-transition-name: card-17; }
.card:nth-child(18) { view-transition-name: card-18; }
.card:nth-child(19) { view-transition-name: card-19; }
.card:nth-child(20) { view-transition-name: card-20; }
.card:nth-child(21) { view-transition-name: card-21; }
.card:nth-child(22) { view-transition-name: card-22; }
.card:nth-child(23) { view-transition-name: card-23; }
.card:nth-child(24) { view-transition-name: card-24; }
.card:nth-child(25) { view-transition-name: card-25; }
.card:nth-child(26) { view-transition-name: card-26; }
.card:nth-child(27) { view-transition-name: card-27; }
.card:nth-child(28) { view-transition-name: card-28; }
.card:nth-child(29) { view-transition-name: card-29; }
.card:nth-child(30) { view-transition-name: card-30; }
.card:nth-child(31) { view-transition-name: card-31; }
.card:nth-child(32) { view-transition-name: card-32; }
.card:nth-child(33) { view-transition-name: card-33; }
.card:nth-child(34) { view-transition-name: card-34; }
.card:nth-child(35) { view-transition-name: card-35; }
.card:nth-child(36) { view-transition-name: card-36; }
.card:nth-child(37) { view-transition-name: card-37; }
.card:nth-child(38) { view-transition-name: card-38; }
.card:nth-child(39) { view-transition-name: card-39; }
.card:nth-child(40) { view-transition-name: card-40; }
.card:nth-child(41) { view-transition-name: card-41; }
.card:nth-child(42) { view-transition-name: card-42; }
.card:nth-child(43) { view-transition-name: card-43; }
.card:nth-child(44) { view-transition-name: card-44; }
.card:nth-child(45) { view-transition-name: card-45; }
.card:nth-child(46) { view-transition-name: card-46; }
.card:nth-child(47) { view-transition-name: card-47; }
.card:nth-child(48) { view-transition-name: card-48; }
.card:nth-child(49) { view-transition-name: card-49; }
.card:nth-child(50) { view-transition-name: card-50; }
```
Which is not robust — what if there are more than 50 items on the Grid?? The experience will break.
It seems View Transitions was designed with the expectation that websites are JavaScript first — that it's fine if every items needs to be uniquely named, a developer can just use JS to create all the HTML, and inline styles with JS-created names.
--
GitHub Notification of comment by jensimmons
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8320#issuecomment-2023077559 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 27 March 2024 15:33:34 UTC