Javascript Web 中的共享元素轉換

Question

考慮這個 UI animation 模型。 這里有一個 Master Detail 頁面。 當用戶點擊/點擊主頁上的給定卡片時，它必須將用戶帶到產品詳細信息頁面

/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 />組件，因為它不會在路由更改時卸載。

但是，如下所示必須將項目從母版頁上的長列表轉換到詳細信息頁的用例也是有效的，不能忽略。 遺憾的是，我找不到任何可以以正確方式實現此目的的 web 參考資料。

你對此有何看法？

Answer 1

查看 Framer Motions AnimateSharedLayout 。 您只需使用AnimateSharedLayout包裝您的應用程序，然后將layoutId添加到您的路由/頁面之間共享的元素，而 framer motion 將負責為中間元素設置動畫。

這是一個代碼示例，完全實現了您正在尋找的內容 https://codesandbox.io/s/framer-motion-animatesharedlayout-app-store-demo-i1kct