[css-view-transitions-2] Allow to control whether make a particular group when the named element was there only in one side
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
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, that have slide transitions support powered by View Transitions API. 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.
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. 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://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)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the CSS View Transitions specification's update pseudo-element styles section and the cited :only-child example, then compare the behavior of named elements present on only one side of a transition. Review whether grouping control belongs in the specification or in document.startViewTransition; done means a documented resolution or agreed specification change.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100