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

Question

我正在努力 Barba JS, alongside GSAP，在我的 React 网站上实施。

作为参考，我已经按照这个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没有发起

演示：

由于demo文件比较少，我创建了一个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();
      }
    }
  ]
});

Answer 1

很难说，但你可以在 barba 的初始化中设置 debug: true，这样它就会输出正在发生的事情的日志 ;)

barba.init({ 调试：真，同步：假， //查看页面观点：[{.....

Answer 2

我已经得出结论，Barba JS 与 React 不兼容。似乎库需要更新才能与 React Router.

一起使用

More details here

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

Cannot get Barba JS transition to work on page change

javascript

reactjs

gsap

barbajs