Javascript Web 中的共享元素转换

编程问答 2022-05-28

问题描述

UI Animation - Master Detail

考虑这个 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 /> 组件，因为它不会在路由更改时卸载。

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

enter image description here

您对此有何看法？

解决方法

查看 Framer Motions AnimateSharedLayout。 您只需使用 gets() 包装您的应用，然后将 AnimateSharedLayout 添加到您的路线/页面之间共享的元素中，并且框架动作将负责为中间部分设置动画。

这是一个代码示例，它完全实现了您正在寻找的https://codesandbox.io/s/framer-motion-animatesharedlayout-app-store-demo-i1kct

androidandroidanimationanimationjavascriptshared