[csswg-drafts] [css-view-transitions-1] Allow to control whether make a particular group when the named element was there only in one side (#8528)

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

== [css-view-transitions-1] Allow to control whether make a particular group when the named element was there only in one side ==
Can I create a named group only when elements with the same name defined by the `view-transition-name` property, exist in both the before and after transition?

I am trying to figure out how to include an element with marked as `view-transition-name: xxx`, that exists only in one side of transition, in `::view-transition-group(root)` instead of `::view-transition-group(xxx)`.

I'm developing the tool to create HTML-based presentation slides called [Marp](https://marp.app), that have [slide transitions support powered by View Transitions API](https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md). All of transition effects for slides are defined as CSS animations working in `::view-transition-group(root)`, and the slide author can make a morphing animation like PowerPoint Morph and Keynote Magic Move, [by marking morphable elements between 2 slides by `view-transition-name` CSS property.](https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md#morphing-animations)

In this case, even if there is an element named with `view-transition-name: xxx` on only one side of the transition, a corresponding `::view-transition-group(xxx)` with a simple fade effect is generated. However, this element is rendered in the same position before and after the transition [due to the specification of View Transitions API](https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles). If the `::view-transition-group(root)` has a flashy effect, may feel this element like out of place.

The following slide example sets various transitions when navigating, and `view-transition-name` property to the inline code in page 2 and 3. ([Source](https://gist.github.com/yhatt/46ee71dd83fbb6cbbeeec3209c9010e0))

https://user-images.githubusercontent.com/3993388/222970637-57f59ccf-7938-4281-982c-a1e1c5dacf1a.mov

If there is no `view-transition-name` property on one side of the transition, I want to make that element belong to `::view-transition-group(root)`. (In above example, transitions when navigating 1 ↔︎ 2 and 3 ↔︎ 4)

I tried to use JavaScript to generate `::view-transition-group()` only when the same named `view-transition-name` property exists on both sides of the transition, but it didn't work out in the end.

I also thought using `::view-transition-old(*):only-child` and `::view-transition-new(*):only-child` CSS selectors as already explained in https://drafts.csswg.org/css-view-transitions-1/#example-387929ce. However, in situations where this selector can be used, `::view-transition-group()` has already been generated. It is not possible to change that group to belong to `::view-transition-group(root)` by CSS.

I apologize if this already is achievable. But if not, are there any insights about controlling whether make a particular group when the element named by `view-transition-name` property was there only in one side of the transition? (e.g. Adding an optional argument to `document.startViewTransition` to set constraints about generating the view transition group)

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


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

Received on Sunday, 5 March 2023 15:54:38 UTC