AI 摘要：本文介绍了如何利用复制动画到 ::view-transition-group，实现元素边框圆角、背景和边框的平滑过渡。

文章聚焦于 View Transitions 中元素状态转换时遇到的边框圆角（border-radius）动画问题。作者通过具体的 Demo 展示了当同一元素转换时，由于使用快照的特性，会导致圆角动画无法自然过渡，而是简单地淡出替换。为了解决这一问题，作者提出了将动画效果复制到 ::view-transition-group 内的方法，通过自定义关键帧（keyframes），实现圆角、背景以及边框等 CSS 属性的平滑过渡。文章还介绍了如何应对背景颜色变化和边框宽度变化的场景，解释了设置 overflow、box-sizing 以及隐藏部分快照的必要性，从而使动画效果达到最佳。最后，作者总结了如何通过分别捕获背景和前景，进而在 View Transition 中获得更理想的动画效果，并呼吁读者在社交媒体上分享此技术。

Bram.us

View Transitions Applied: Smoothly animating a border-radius with a View Transition

To smoothly animate things like borders as part of a View Transition, you need to duplicate that animation onto the ::view-transition-group. For best effect, have the View Transition separately capture the background and foreground of the element you’re animating.

AI 摘要：探讨视图转换伪元素坐标空间差异导致的布局跳跃问题及解决方法。

本文深入分析了在视图转换（View Transitions）中使用 ::view-transition-group(*) 伪元素时，因坐标系差异（视口 vs 快照包含块）导致的布局跳跃问题。作者通过代码示例说明如何通过 getBoundingClientRect 获取元素的旧/新位置，并利用这些坐标优化动画关键帧。然而，在移动端场景中，由于视口（Layout Viewport）与快照包含块（Snapshot Containing Block）的坐标系原点不同（如地址栏影响），直接使用视口坐标会导致动画跳跃。文章提出需通过坐标系转换方法解决这一问题，并附移动端示例验证解决方案的有效性。

Bram.us

View Transitions Applied: Dealing with the Snapshot Containing Block

Beware when manipulating the coordinates of the View Transition’s ::view-transition-group(*) pseudo. Depending on where you read those coordinates from, you might end up with layout jumps when writing them back. This post details the pitfalls and how to deal…