WordPress / Elementor 實現類似 React 的 Framer's Motion 的頁面過渡效果

Question

最近發現了一個真正吸引我的話題，那就是 React Route 和 Framer Motion。

我主要用 WordPress 和 Elementor 建站，請問有沒有什么辦法可以達到 React 的 Framer 運動的效果？ 例如單擊一個 object 並平滑過渡 animation 到另一個頁面。

例如： https://akashisakebrewery.com/

我注意到這個網站是用 WordPress 構建的，但我相信很多自定義編碼，只是想知道最好的方法是什么？

I was thinking to use simple CSS animation and pair up with jQuery onclick combine with the page load CSS animation, but don't think that's the proper way to do it, at the same time for dynamic listing, it's also not possible to achieve something就像我嘗試的 Framer Motion 一樣。

任何想法和經驗分享將不勝感激！

Answer 1

我不會用“什么是最好的方法”來表達這個問題，因為有很多好的方法取決於你所做的權衡。

我只是互聯網上的某個人，但是

1. 如果您只想做類似該網站的事情，則不需要 framer-motion 或任何與 SPA 相關的東西，因為它們的過渡不是跨路線的。 這一切都在他們的/路線上，就像你提到的那樣可行。
2. 如果您確實想動態地跨路由轉換，我認為您需要使用 SPA（單頁應用程序）。

SPA 和傳統的 WordPress（或相關）設置之間的主要區別在於，SPA 不會為每條路線重新下載新的捆綁包，並且在您的情況下，您可以靈活地控制路線更改的樣子。 我會自己研究 SPA 與 MPA 以獲取更多詳細信息！

如果您決定選擇＃2，盡管這種飛躍會帶來很多成本，那么您將不得不決定這些過渡對您來說是否值得。

這是我為另一個問題制作的成幀器運動頁面轉換的鏈接，如果您想查看代碼的另一個示例： https://codesandbox.io/s/framer-motion-animate-react-router-過渡-kczeg

Answer 2

不推薦的方式- 以一種非常可疑的方式，您可以將帶有所需動畫的 React 應用程序集成到您的 Wordpress 站點中：（我使用 Framer Motion 進行了測試）

1. 與 Wordpress 分開創建一個 React 應用程序
2. 將bundle.js內容復制粘貼到 Wordpress 中的新 javascript 文件中
3. 使用wp_enqueue_script加載該文件
4. 將<div id="root"></div>添加到 Wordpress 頁面，您希望在其中擁有這些動畫

這可能不是最優雅和最方便的方法。 性能可能會受到影響，內容是硬編碼的，復制粘貼的整個工作流程有點像 hack。

推薦方式： - 我對此進行了進一步調查，並創建了一個由 Framer Motion 動畫的簡單 Gutenberg 塊。 隨意看一下代碼。： https://github.com/tahireu/framer-motion-block

演示： https://tahireu.com/animated/