gpt4 book ai didi

vue.js - Vue 中的共享元素转换 : how to transition between related elements in distinct views on route change

转载 作者:搜寻专家 更新时间:2023-10-30 22:54:59 29 4
gpt4 key购买 nike

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

这里有一些例子:

常见的解决方案是通过在页面流之外使用不同的元素或通过跨布局覆盖元素并使用考虑到覆盖空间的自愿空隙和绝对定位来伪造这种效果,给人以元素内置于自然的印象页面流。参见示例 Native-Like Animations for Page Transitions on the Web (参见 comment )或 snipcart/vue-blog-demo .

Shared Element Transition 会在具有不同页面布局的不同 View 中分别定义的两个元素之间建立关系,并会在它们之间进行转换,可能采用一种 FLIP 方式。

最佳答案

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

Ramjet makes it look like your DOM elements are capable of transforming into one another. It does this by cloning the elements (and all their children), transforming the second element (the one we're transforming to) so that it completely overlaps with the first, then animating the two elements together until the first element (the one we're transitioning from) has exactly the same position and dimensions as the second element originally did.

关于vue.js - Vue 中的共享元素转换 : how to transition between related elements in distinct views on route change,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51615274/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com