w3c / w3c/csswg-drafts

[css-view-transitions-2] Allow to control whether make a particular group when the named element was there only in one side

Open
#8,528 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-view-transitions-2
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.