Vue 中的共享元素转换：如何在路径更改的不同视图中的相关元素之间进行转换

Question

如何在路由更改的两个不同视图中定义的两个元素之间进行转换，通常称为跨多个页面元素的“共享转换”或“类似原生的转换”页面布局？

这里有一些例子：

• Shared Element Transitions in airbnb/native-navigation（反应）
• Animation Anchoring（角）

常见的解决方案是通过在页面流之外使用不同的元素或通过在布局中覆盖元素并使用考虑到覆盖空间的自愿空白和绝对定位来假装这种效果，以给人一种元素内置在自然中的印象页面流。例如见Native-Like Animations for Page Transitions on the Web（见comment）或snipcart/vue-blog-demo。

共享元素转换会在不同页面布局的不同视图中分别定义的两个元素之间创建关系，并在它们之间转换，可能以一种 FLIP 方式。

Answer 1

库vue-overdrive 使用Ramjet 模拟不同组件之间的这种转换。

Ramjet 使您的 DOM 元素看起来能够相互转换。它通过克隆元素（及其所有子元素）、转换第二个元素（我们要转换为的元素）使其与第一个元素完全重叠，然后将这两个元素一起设置动画直到第一个元素（我们're transitioning from) 的位置和尺寸与最初的第二个元素完全相同。