0

我正在研究我的投资组合，并尝试使用 barba.js。但是我无法弄清楚如何做某事：我想像这样布局我的 3 页： page1 -> page2 -> page3 -> page1 具有从右到左的过渡，以及 page1 -> page3 -> page2 -> page1 具有从左到右的过渡，您只需单击一下即可离开网站的任何其他页面。但我不知道如何将路由逻辑告诉 barba。

现在，过渡总是一样的（但至少它们是有效的，所以 barba 是正确实现的）。

这是我的 js 代码：

barba.init({
  // debug: true,
  transitions: [
    {
      name: "toRightTransition",
      // sync: true,
      from: {
        namespace: [
          "bio",
          "index",
          "projects"
        ]
      },
      to: {
        namespace: [
          "projects",
          "bio",
          "index"
        ]
      },
      leave(data) {
        return gsap.to(data.current.container, { duration: .3, x: window.innerWidth, ease: "power4" });
      },
      enter(data) {
        return gsap.from(data.next.container, { duration: .3, x: -window.innerWidth, ease: "power4" });
      },
    },
    {
      name: "toLeftTransition",
      // sync: true,
      from: {
        namespace: [
          "bio",
          "index",
          "projects"
        ]
      },
      to: {
        namespace: [
          "index",
          "projects",
          "bio"
        ]
      },
      leave(data) {
        return gsap.to(data.current.container, { duration: .3, x: -window.innerWidth, ease: "power4" });
      },
      enter(data) {
        return gsap.from(data.next.container, { duration: .3, x: window.innerWidth, ease: "power4" });
      },
    },
  ],
})

很容易看出问题出在哪里：在每个转换关键字中都有 3 个命名空间，barba 无法确定要为任何给定路由应用哪个转换。

现在摆脱我的“总是单击一下”的想法让事情变得更简单（我只需为每个转换关键字放置两个命名空间，我尝试过它并且它有效），但我真的很想保持这个方向。

关于如何使这项工作的任何想法？

4

0 回答 0