时间戳

首页 > 解决方案 > Javascript Web 中的共享元素转换

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

问题描述

UI 动画 - 主细节

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

/products---> /products/:productId

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

主产品页面可能有很长的此类卡片列表（甚至在屏幕折叠下方）。现在，执行这种转换并不是很困难，它混合了简单的缩放、平移、不透明度操作。

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

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

像这样的东西

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

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

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

在此处输入图像描述

您对此有何看法？

标签： javascriptandroidanimationtransitionshared

解决方案

查看 Framer Motions AnimateSharedLayout。您只需使用 包装您的应用程序AnimateSharedLayout，然后将 a 添加layoutId到您的路线/页面之间共享的元素中，并且 framer 运动将负责为中间动画制作动画。

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

推荐阅读