无法让 Barba JS 过渡以处理页面更改答案

【问题标题】：Cannot get Barba JS transition to work on page change无法让 Barba JS 过渡以处理页面更改
【发布时间】：2021-10-11 20:18:38
【问题描述】：

我正在尝试在我的 React 网站上实现 Barba JS 以及 GSAP。

供参考，我一直跟着这个video tutorial here，这个教程当然不在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 没有启动。

演示：

由于演示涉及一些文件，我创建了一个codesandbox here。

编辑：

更新了我的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();
      }
    }
  ]
});

【问题讨论】：

标签： javascript reactjs gsap barbajs

【解决方案1】：

很难说，但你可以设置 debug: true，在 barba 的初始化中，所以它会吐出发生的日志；）

barba.init({ 调试：是的，同步：假， //查看 das 页面意见：[{.....

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

我已经得出结论，Barba JS 与 React 不兼容。似乎图书馆需要更新才能使用React Router。

More details here

【讨论】：