Skip to content

[css-view-transitions-2] Allow auto as a keyword #10922

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Oct 1, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions css-view-transitions-2/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -753,6 +753,72 @@ div.box {
1. Return |viewTransition|.
</div>

# Determining 'view-transition-name' automatically # {#auto-vt-name}

## Overview ## {#auto-vt-name-overview}

*This section is non-normative.*

For an element to participate in a view transition, it needs to receive a unique 'view-transition-name'.
This can be tedious and verbose when multiple elements are involved in the same view transition, especially in cases where many of those are same-element transitions,
as in, the element has the same 'view-transition-name' in the old and new state.

To make this easier, setting the 'view-transition-name' to ''view-transition-name/auto'' would generate a 'view-transition-name' for the element, or take it from the element's [=Element/id=] if present.

## Examples ## {#auto-vt-name-example}

<div class="example">
In this example, view transition is used to sort a list in an animated way:

```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
...
</ul>
```

Ordinarily, each of these items would have to receive a unique 'view-transition-name':

```css
li:nth-child(1) { view-transition-name: item1; }
li:nth-child(2) { view-transition-name: item1; }
li:nth-child(3) { view-transition-name: item1; }
li:nth-child(4) { view-transition-name: item1; }
...
```

With ''view-transition-name/auto'', this CSS would work:

```css
li {
view-transition-name: auto;
}
```
</div>

## Additions to 'view-transition-name' ## {#additions-to-vt-name}

In addition to the existing values, the 'view-transition-name' also accepts an <dfn for=view-transition-name type=value export>auto</dfn> keyword.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would have been useful for w3c tools, to define it with New values in a (partial) property definition table (exemple).

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I was not aware of this, thanks. I'll upload a revision.

To resolve the [=used value=] of 'view-transition-name' for |element|:
1. Let |computed| be the [=computed value=] of 'view-transition-name'.
1. If |computed| is <css>none</css>, return null.
1. If |computed| is a <<custom-ident>>, return |computed|.
1. Assert: |computed| is <css>auto</css>.
1. If |element| has an associated [=Element/id=], and |computed| is associated with the same [=tree/root=] as |element|'s [=tree/root=], then return the value of |element|'s [=Element/id=].

Note: this means that a ''::part()'' pseudo-element wouldn't resolve to its matching element's [=Element/id=].

1. Return a unique string. The string should remain consistent and unique for this element and {{Document}}, at least for the lifetime of |element|'s [=node document=]'s [=active view transition=].

Note: this string is not web-observable, and is used for addressing the element in internal algorithms.

Note: When used in a cross-document view transition, generated <css>auto</css> values never match, resulting in separate ''::view-transition-group()'' pseudo-elements, one exiting and one entering.

A 'view-transition-name' generated by <css>auto</css> is a [=tree-scoped name=].

# Nested view-transitions # {#nested-view-transitions}

## Overview ## {#nested-overview}
Expand Down Expand Up @@ -1170,6 +1236,8 @@ When [[css-view-transitions-1#style-transition-pseudo-elements-algorithm|updatin
1. [=Multiply=] |transform| by the inverse matrix of |groupContainerElement|'s [=transform from snapshot containing block=].
</div>



<h2 id="priv" class="no-num">Privacy Considerations</h2>

This specification introduces no new privacy considerations.
Expand Down