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

vmpstr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transitions-2] Proposal for a view-transition-tree property (name tbd) ==
View transitions right now construct a tree of pseudo elements that in some sense "flattened". That is, each `::view-transition-group` is a direct child of `::view-transition`, which is a pseudo child of `:root`. This allows some nice effects where each piece of a transition moves independently.

However, there is also desire to have some relationship between the constructed groups. 
1. Some elements should move relative to their containers while their containers are also participating in a transition. This could be something like a box moving across the screen and the contents within that box also animate in an orthogonal axis. 
2. Some elements want to be clipped by the ancestor that is also participating in a transition. For example a button that stays the same size but its contents expand within the clip and crossfade.

Essentially what we want is for some elements to maintain their hierarchical relationship, where a `::view-transition-group` can have another `::view-transition-group` as a child.

The proposal is to add a new `view-transition-tree` property that takes two values: `flatten` and `preserve`. This property would only have an effect if a `view-transition-name` is also specified.

The `flatten` value would be the default value and act as it acts today, the element on which this appears does not affect how the view transition descendants are constructed.

The `preserve` value would act as a sort of a "containing block" for the view transition descendants: all of the descendants would be nested under their nearest `preserve` ancestor.

All of the names are bikesheddable, of course

/cc @nt1m @khushalsagar @noamr @jakearchibald 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10334 using your GitHub account


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

Received on Tuesday, 14 May 2024 20:20:11 UTC