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…