- From: Bramus via GitHub <noreply@w3.org>
- Date: Thu, 19 Jun 2025 09:34:58 +0000
- To: public-css-archive@w3.org
To those not entirely following let me walk you through the demo. The current default behavior – which does not animate the border – is this: https://github.com/user-attachments/assets/23fbe6a1-b8e7-4714-9492-1424f649d5ca If you look closely the nested albums bleed over the border when the border becomes bigger, or they get clipped a bit when the border becomes smaller. When you tick the second checkbox on the demo, the `border-width` on the `::view-transition-group-children` pseudo will animate. It’s a slightly better experience, but as you can see it’s still not perfect: https://github.com/user-attachments/assets/d75c4bd2-1210-4a11-ad43-c5cc2041cd3f The best experience comes when ticking the third checkbox as well, which animates the original element by only showing the new snapshot and using a transition on the border – a technique described in https://brm.us/view-transitions-border-radius-revisited https://github.com/user-attachments/assets/4d1aa57b-9d47-451b-97ef-491bfdac3594 With both workaround checkboxes checked: - The wrapper itself animates - The position of the nested contents also animate (and get clipped) as you’d expect. --- I’d like to assume that the last recording is what authors want. We could get partially give authors that by animating the border (and other decorations) on the `::view-transition-group-children` pseudo, but it’d still require authors to duplicate that animation/transition on the actual element itself so that they don’t get the cross-fade. That last part is definitely doable in CSS (hide the old snapshot + don’t animate the new + transition the props on the OG element *), but it would require a manual intervention by the author. Maybe we can do this by default, expecting authors to fill in the extra gap (because they opted-in to this by using groups)? Or maybe authors can opt-in to a more advanced thing in which we do the transition for them (by the UA creating [an animation on the original group](ttps://www.bram.us/2025/03/11/view-transitions-border-radius/#dealing-with-changing-borders) for them?) _TL;DR: I do think we’d want to animate the props on the new pseudo, but perhaps we should also give authors an option to animate the actual OG element underneath (which would only work if it’s the same element)_ -- GitHub Notification of comment by bramus Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12363#issuecomment-2987420609 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Thursday, 19 June 2025 09:34:59 UTC