[csswg-drafts] [css-view-transition] Using :has pseudo-class with groups (#10728)

XIYO has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-view-transition] Using :has pseudo-class with groups ==
Dear CSS Working Group,

I am writing to propose the addition of support for the `:has()` pseudo-class in conjunction with `::view-transition-group`.

**Problem:**

When using `view-transition`, rounded designs can become distorted during size changes. To address this, I've attempted to utilize `view-transition-group` to apply additional styles that maintain the rounded effect throughout the transition. However, if an element is removed or added, the group will always be in an `:only-child` state, making styling like `new:only-child` impossible.

**Proposed Solution:**

I believe the introduction of a pseudo-class such as `::view-transition-group(some):has(::view-transition-new:only-cihld)` would be beneficial. This would allow us to target specific scenarios within view transitions, enabling more nuanced styling.

```css
::view-transition-group(some):has(::view-transition-new:only-cihld) {
  animation-name: height-zero-to-auto;
}

::view-transition-group(some):has(::view-transition-old:only-cihld) {
  animation-name: height-auto-to-zero;
}
```

https://github.com/user-attachments/assets/28a38807-a199-4e86-bdff-10a417c45b0c


**Video Explanation:**

The top left and right elements in the video utilize `view-transition-group` as a background to prevent the rounded corners from being distorted during size changes (using the same `border-radius` value as the original element).

The bottom left and right elements represent the default settings with only animation timing adjustments. The left element has `height: 100%` applied to both `new` and `old`. The right element only has timing adjustments.

**Additional Context:**

While the blog post "View transitions: Handling aspect ratio changes" by Jake Archibald offers some tricks, significant size changes in rounded elements can still lead to undesirable visual artifacts, impacting the user experience.

I hope this proposal is clear and concise. I believe this addition would enhance the capabilities of `view-transition` and contribute to a smoother user experience.

Thank you for your time and consideration.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10728 using your GitHub account


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

Received on Monday, 12 August 2024 16:24:31 UTC