首页 文章

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

提问于
浏览
1

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

这里有些例子 :

常见的解决方案是通过在页面流之外使用不同的元素或通过在布局之间叠加元素并使用自愿空隙和绝对定位来考虑叠加空间来假设元素内置于自然页面流中,从而伪造此效果 . 请参阅例如Native-Like Animations for Page Transitions on the Web(参见comment)或snipcart/vue-blog-demo .

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

1 回答

  • 3

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

    Ramjet使您的DOM元素看起来能够相互转换 . 它通过克隆元素(及其所有子元素),转换第二个元素(我们正在转换的元素)使其与第一个元素完全重叠,然后将两个元素一起动画直到第一个元素(我们“从中过渡”具有与第二个元素原来完全相同的位置和维度 .

相关问题