Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-view-transitions-1] Clarify the list of pseudo-elements that can be followed with :only-child #9996

Closed
nt1m opened this issue Feb 25, 2024 · 6 comments
Labels
css-view-transitions-1 View Transitions; Bugs only

Comments

@nt1m
Copy link
Member

nt1m commented Feb 25, 2024

I'm guessing all the functional pseudo-elements can be followed by :only-child, but there are some clarifications I'd like to see:

  1. Does it apply to ::view-transition ? (It would always apply if yes?)

  2. Does it apply to ::view-transition-group(...) / ::view-transition-image-pair(...) ? (I'm guessing yes)

  3. Is an element with only with display: none siblings counted? (I'm guessing no)

I guess I can go dig into Chrome's source to get the answer but it would be nice to have this explicitly put in the spec.

@nt1m nt1m added the css-view-transitions-1 View Transitions; Bugs only label Feb 25, 2024
@nt1m
Copy link
Member Author

nt1m commented Feb 25, 2024

@nt1m
Copy link
Member Author

nt1m commented Feb 25, 2024

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?

@nt1m
Copy link
Member Author

nt1m commented Feb 25, 2024

It also occurs to me that there's no definition for group/image-pair (even though that one is more obvious)

@bramus
Copy link
Contributor

bramus commented Feb 25, 2024

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 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.

@nt1m
Copy link
Member Author

nt1m commented Feb 26, 2024

Either ::view-transition-old() or ::view-transition-new() are absent in cases where the capture does not have an “old” or “new” state.

Oh I totally missed that, thanks! Would be good if the spec was more explicit about which property on the captured element struct this relates to. Right now I assume it's "old image" and "new element", but it could be any of the "old" properties :)

@noamr
Copy link
Collaborator

noamr commented Feb 26, 2024

Either ::view-transition-old() or ::view-transition-new() are absent in cases where the capture does not have an “old” or “new” state.

Oh I totally missed that, thanks! Would be good if the spec was more explicit about which property on the captured element struct this relates to. Right now I assume it's "old image" and "new element", but it could be any of the "old" properties :)

We can add a clarification, why not. Want to have a go at a PR @nt1m ?

@nt1m nt1m closed this as completed Mar 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-view-transitions-1 View Transitions; Bugs only
Projects
None yet
Development

No branches or pull requests

3 participants