无法让 Barba JS 转换在页面更改时工作

Question

我正在尝试在我的网站上实施Barba JS和GSAPReact。

作为参考，我在这里遵循了这个视频教程，当然这个教程不在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。

编辑：

已更新我的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。

更多详情请点击此处