無法讓 Barba JS 轉換來處理頁面更改

Question

賞金明天到期。 這個問題的答案有資格獲得+50聲望獎勵。 Freddy想引起更多人對這個問題的關注。

我正在嘗試在我的React網站上實現Barba JS和GSAP 。

作為參考，我在這里關注了這個視頻教程，這個教程當然不在React 。

這是我的文件夾結構，它展示了此過渡效果的所有相關文件：

 theme public index.html src components Header Header.js pages Homepage Contact utils anim.js helpers.js App.js index.js

我安裝了以下軟件包：

• gsap - 版本3.8.0
• @barba/core - 版本2.9.7

當前結果

• 沒有控制台錯誤，也沒有編譯錯誤。

• 切換頁面時，沒有過渡。 幾乎感覺barba沒有啟動。

演示：

由於演示涉及幾個文件，我在這里創建了一個代碼沙盒。

編輯：

更新了我的barba轉換代碼並添加了debug: true 。 然后，將鼠標懸停在我的聯系頁面按鈕上時，控制台會顯示錯誤： [@barba/core] Error: Fetch error at XMLHttpRequest.o.onerror ?

 import { pageTransition } from "./helpers"; import barba from '@barba/core'; export function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } barba.init({ debug: true, sync: true, transitions: [ { async leave(data){ const done = this.async(); pageTransition(); await delay(1000); done(); } } ] });

Answer 1

從那以后我得出結論，Barba JS 與 React 不兼容。 似乎該庫需要更新才能與React Router 。

更多細節在這里

Answer 2

很難說，但你可以在 barba 的初始化中設置 debug: true，這樣它就會吐出正在發生的事情的日志；)

barba.init({ debug: true, sync: false, //views das paginas views: [{.....