1

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

这里有些例子 ：

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

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

4

1 回答 1

4

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

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

于 2018-11-16T20:50:59.507 回答