Re: [csswg-drafts] [css-view-transitions-2] Proposal for a view-transition-tree property (name tbd) (#10334)

Thinking through an example:

https://user-images.githubusercontent.com/93594/184126476-83e2dbc7-ba26-4135-9d16-c498311f2359.mp4

In this case, the top box doesn't want to be contained, as it wants to transition between containers, whereas the other items need to be contained within the container.

I can think of a couple of ways of doing this:

# Option 1: Manual grouping

`view-transition-parent: name | auto | none`. Takes the name of a group to be nested within, or `auto`, which takes the name of the closest ancestor with a `view-transition-name`.

So, for the above example:

```html
<div class="container-1">
  <div class="card card-switching-containers" style="view-transition-name: card-1"></div>
  <div class="card" style="view-transition-name: card-2"></div>
  <div class="card" style="view-transition-name: card-3"></div>
  <div class="card" style="view-transition-name: card-4"></div>
</div>
<div class="container-2"></div>
```

And the CSS for the transition:

```css
.container-1 {
  view-transition-name: container-1;
}

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

.card-switching-containers {
  view-transition-parent: none;
}

html::view-transition-group(container-1) {
  overflow: clip;
}
```

This is a bit manual, as I need to set things up for this particular transition.

# Option 2: Auto grouping

The `view-transition-tree` proposal in the OP, but children are grouped to the closest `view-transition-tree: preserve` 'parent' that is in both the old and new states.

```html
<div class="container-1">
  <div class="card" style="view-transition-name: card-1"></div>
  <div class="card" style="view-transition-name: card-2"></div>
  <div class="card" style="view-transition-name: card-3"></div>
  <div class="card" style="view-transition-name: card-4"></div>
</div>
<div class="container-2"></div>
```

And the CSS for the transition:

```css
.container-1 {
  view-transition-name: container-1;
  view-transition-tree: preserve;
}

html::view-transition-group(container-1) {
  overflow: clip;
}
```

This case 'just works', because a given card won't be grouped within `container-1`'s group if it's moving to/from `container-2`.

I wonder if there are cases this doesn't provide enough flexibility.

# Option 3: both?

Allow option 2, but also allow individual children to assign themselves to a particular parent group. The assignment from the child would take priority.

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


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

Received on Wednesday, 15 May 2024 08:20:02 UTC