Fix view-transition-class custom-ident description

[TGianella]

Description

Corrects several issues related to custom-ident value description in view-transition-class doc (1 commit for each, in this order):

• It does not need to be unique
• It does not cause the element to participate in a separate view-transition group
• Several custom-ident are supported but apart from the formal syntax the first sentence of the doc implies that only one class can be given.

Motivation

I came to this article to know whether I could use several custom-idents on one element and I missed the + in the formal syntax but nowhere else in the doc this is said and I feel readers could benefit from a bit of redundancy and more clarity.

The value description field was plain wrong, the info is true for view-transition-name but not for view-transition-class so it contributes to keep the confusion going between these two.

Related issues and pull requests

Fixes #43784

[github-actions]

Preview URLs (1 page)

• /en-US/docs/Web/CSS/Reference/Properties/view-transition-class

[pepelsbey]

Good catch! Thank you 🙂

I would go the extra step and make sure it’s clear, both from the description and additional examples. What do you think?

[pepelsbey]

Suggested change

	- : An identifying name that allows the element to be selected by view transition pseudo-elements in order to apply styles during the transition.
	- : An identifying name used to select view transition pseudo-elements for styling. Unlike `view-transition-name`, a class does not need to be unique and does not cause the element to participate in a separate view transition group.

I would not only remove the factual mistake but double down on the fact.

[pepelsbey]

Suggested change

	### Styling a shared class across multiple elements
	In this example, three cards each have a unique {{cssxref("view-transition-name")}} (required for pairing old and new states), but they all share the same `view-transition-class`. This lets you write a single rule that styles all their transitions at once, rather than repeating styles for each name individually. Unlike `view-transition-name`, a `view-transition-class` does not need to be unique.
	```html
	<div class="card" id="card1">Card 1</div>
	<div class="card" id="card2">Card 2</div>
	<div class="card" id="card3">Card 3</div>
	```
	```css
	/* Each element must have a unique view-transition-name */
	#card1 {
	view-transition-name: card-1;
	}
	#card2 {
	view-transition-name: card-2;
	}
	#card3 {
	view-transition-name: card-3;
	}
	/* But they can all share the same view-transition-class */
	.card {
	view-transition-class: card;
	}
	/* This single rule applies to all three cards' transitions */
	::view-transition-group(*.card) {
	animation-duration: 0.5s;
	animation-timing-function: ease-in-out;
	}
	```
	### Using multiple classes on a single element
	In this example, both product cards are assigned `fast-card-slide` via `view-transition-class`, while each still has its own unique {{cssxref("view-transition-name")}}. A single `::view-transition-group(.fast-card-slide)` rule then applies the same animation duration to both cards' transitions, without needing to target each name individually.
	```html
	<div class="product" id="card1">Card 1</div>
	<div class="product" id="card2">Card 2</div>
	```
	```css
	.product {
	view-transition-class: fast-card-slide;
	}
	.product#card1 {
	view-transition-name: show-card;
	}
	.product#card2 {
	view-transition-name: hide-card;
	}
	::view-transition-group(.fast-card-slide) {
	animation-duration: 3s;
	}
	```

[TGianella]

Great addition, I agree with you on going the extra mile!

Unless I'm mistaken in the Using multiple classes on a single element section example you only use one class on several elements.

Here is what I have in mind to better exemplify this section with different "atomic" styles (animation-name/animation-duration) that you might want to apply separately across a codebase:

<div class="card" id="card1">Card 1</div>
<div class="card" id="card2">Card 2</div>

.card {
  view-transition-class: slide fast-transition;
}

.product#card1 {
  view-transition-name: card1;
}

.product#card2 {
  view-transition-name: card2;
}

::view-transition-new(.slide) {
  animation-name: slide-in;
}

::view-transition-old(.slide) {
  animation-name: slide-out;
}

::view-transition-group(.fast-transition) {
  animation-duration: .5s;
}

What do you think ?