#优质博文 #前端 #css #动画
View Transitions Snippets: Keeping track of the old and new positions of a transitioned element
AI 摘要：作者介绍了如何在使用视图过渡（View Transitions）时，获取元素在过渡前后的位置信息。通过在过渡开始前调用
via Bramus
View Transitions Snippets: Keeping track of the old and new positions of a transitioned element
AI 摘要：作者介绍了如何在使用视图过渡（View Transitions）时，获取元素在过渡前后的位置信息。通过在过渡开始前调用
getBoundingClientRect() 获取元素的初始位置和尺寸，在过渡更新回调完成后再次调用该方法获取新的位置和尺寸。这些信息可用于调试或自定义动画效果，例如替换浏览器生成的 ::view-transition-group() 关键帧，以实现更高效的动画。作者还指出，直接从 ::view-transition-group() 的关键帧中提取位置信息的方法由于浏览器实现中的错误和偏移参考系的问题，可能不可行。 via Bramus
Bram.us
View Transitions Snippets: Keeping track of the old and new positions of a transitioned element
By calling getBoundingClientRect before and after the snaphots are taken, you can get the before and after positions of the transtioned elements.
