javascript - Javascript Web 中的共享元素转换

Question

考虑这个 UI 动画模型。这里有一个 Master Detail 页面。当用户点击母版页上的给定卡片时，它必须将用户带到产品详细信息页面

/products ---> /products/:productId

它适用于所有前端平台，无论是 Android/ios 还是 Web

主要产品页面可能有一长串此类卡片(甚至在屏幕折叠下方)。现在，执行此转换并不困难，它是简单缩放、平移、不透明度操作的组合。

如果这个应用程序没有涉及路由，那就没问题了。但是考虑到，我们需要将产品详细信息页面路由设置为 /products/:productId .

现在的问题是，不可能在您的应用程序中跨页面执行这些连续的平滑过渡，因为路由更改会导致卸载当前页面及其所有子组件并安装新页面组件。为了执行上述转换/动画，唯一可能的方法是我们可以将要转换的组件或卡带到动态路由之外 hierarchy .

像这样

<Router>
    <Card />
    <Switch>
        <Route path="/products/:productId" component={ProductDetail} />
        <Route path="/products" component={Products} />
        <Route path="/" component={Home} />
    </Switch>
</Router>

所以在这里，所讨论的理想转换的唯一候选者是 <Card />跨页面导航组件，因为它不会在路由更改时卸载。

但是，如下所示必须将项目从母版页上的长列表转换到详细信息页的用例也是有效的，不能忽略。遗憾的是，我找不到任何可以以正确方式实现这一目标的 Web 引用资料。

你对此有何看法？

Answer 1

查看 Framer Motions AnimateSharedLayout .您只需使用 AnimateSharedLayout 包装您的应用，然后将 layoutId 添加到您的路由/页面之间共享的元素，而 framer motion 将负责为中间元素设置动画。

这里有一个代码示例，可以准确地实现您正在寻找的内容 https://codesandbox.io/s/framer-motion-animatesharedlayout-app-store-demo-i1kct