Skip to content

[css-view-transitions-2] Add a way to auto-generate view transition names for single page transitions #10148

@nt1m

Description

@nt1m

This type of CSS isn't particularly great for single page transitions:

	.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; }

It would be good if the reserved auto keyword could be leveraged here to do this:

.card { view-transition-name: auto; }

or such.

One concern that was brought up is that it wouldn't be possible to automatically to do this for cross-document transitions, but I doubt that is a significant issue, but this is pretty useful by itself even just for single-page ones.

cc @khushalsagar @vmpstr @noamr @fantasai @jensimmons

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions