Re: [csswg-drafts] [css-view-transitions-2] Creating 'classes' of transition groups (#8319)

> I find it unfortunate to see the multiplication of concepts to grasp that are similar but not identical: classes / names / types.
> 
> I wonder if it would be possible to abstract classes behind names by making `view-transition-name` a shorthand.
> 
> Full syntax:
> 
> ```
> view-transition-name: none | [<class>+ / <id>] | <class>+ | <id>;
> view-transition-names: none | <class>+;
> view-transition-identifier: none | auto | <id>;
> ```
> 
> Example:
> 
> ```
> view-transition-names: name-1 name-2;
> view-transition-identifier: auto; // generate an ID for this view transition
> ```
> 
> And the short syntax would be:
> 
> ```
> view-transition-name: name-1 name-2;
> ```
> 
> You would use it as:
> 
> ```
> ::view-transition-group(name-1) {
> }
> ```
> 
> which would match all elements with the name-1 ID or name.
> 
> The idea is that developers can just use names / classes interchangeably without having to think about it too hard.
> 
> I'm tempted to only allow selecting with a single "class", since view transition "types" kind of cover the use case of using multiple classes, but if you were to select for multiple classes, this would be possible:
> 
> ```
> ::view-transition-group(name-1 name-2) {
> 
> }
> ```
> 
> This would match:
> 
> * something with the class `name-1` and the class `name-2`
> * something with the ID `name-1 ` and the class `name-2`
> * something with the ID `name-2` and the class `name-1`

There are similar proposals on this thread like [this one](https://github.com/w3c/csswg-drafts/issues/8319#issuecomment-1756046626), the reason we didn't go with them is because often you'd want to define classes and names separately.
For example you have a banana, apple, and orange icons on the page, you want them to morph, but you want all "fruit" icons to animate the same way:

```css
.fruit { view-transition-class: fruit } 

#banana { view-transition-name: banana }
#apple { view-transition-name: apple }
#orange { view-transition-name: orange }
```

See [previous discussion summary about this](https://github.com/w3c/csswg-drafts/issues/8319#issuecomment-1766520418).

Also I appreciate the sentiment to make it easier to define things with shorthands, but I wonder if perhaps we should let some patterns emerge with the building blocks. Note that without using classes/types at all things should still work :)


-- 
GitHub Notification of comment by noamr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8319#issuecomment-1827434535 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 27 November 2023 09:14:36 UTC