Skip to content

[css-view-transitions-1] CSS selector to differentiate transitions with only old or new images #8057

Closed
@khushalsagar

Description

@khushalsagar

Filing a separate issue to track the use-case identified in the comment here, pasted below:

I'll note that our suggestion doesn't rely specifically on the specific mapping of class/element syntax, but that provides a good example. Whatever the selector-syntax mapping (@FremyCompany's suggestion of IDs might make more sense), the goal is just to allow compound/complex selectors in the function.

One reason for that might be exposing the hierarchy. The more important goal in my mind was the ability to differentiate what happens in these three instances:

  1. There is only a new image.
  2. There is only an old image.
  3. There are both old and new images.

The solution mentioned a few times for that is using :only-child/:not(:only-child) on the element in question. I assume that solution is also possible with the current proposal?

html::view-transition-old(*):only-child {
  /* this is a default exit animation */
}

This could be done with html::view-transition-old(*):only-child but @jakearchibald highlighted that " it's tricky because what does ::before:only-child mean? We might need to allow-list which pseudos can use :only-child."

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions