Re: [csswg-drafts] [css-view-transitions-2] view-transition-name determined by element (#8320)

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