Re: [csswg-drafts] [css-view-transitions-1] Clarify the list of pseudo-elements that can be followed with `:only-child` (#9996)

> I admit I also have trouble understanding how `:only-child` works for `::view-transition-old/new()`. Would it be possible to define those in terms of a selector matching function and the namedElements map?

I think the spec is already pretty clear on this. For `::view-transition-old()` it reads _“it is omitted if there’s no “old” state to represent.”_. For `::view-transition-new()` it has a similar thing in place.

In the [intro to the VT pseudos](https://www.w3.org/TR/css-view-transitions-1/#view-transition-pseudos) it shows a diagram of the tree-structure of the pseudos, which makes it clear that `::view-transition-old()` and `::view-transition-new()` are direct children of `::view-transition-image-pair()`. That part also reads _“Either ::view-transition-old() or ::view-transition-new() are absent in cases where the capture does not have an “old” or “new” state.”_

With only one of the `::view-transition-old()`/`::view-transition-new()` pseudos possibly being prevent, authors can use `:only-child` to detect whether there was only a new or only an old snapshot for that specific v-t object. Based on that, they can do different animations.

See https://codepen.io/bramus/pen/mdabWzr for a demo: when you add a card there is only a `::view-transition-new()` pseudo which does a slide-down+fade-in animation. When removing a card there is only a `::view-transition-old()` pseudo which does a slide-up+fade-out animation.

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


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

Received on Sunday, 25 February 2024 22:31:22 UTC