如何告诉 barba.js 在给定路线上使用哪个过渡？

问题描述

我正在处理我的投资组合，并尝试使用 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,x: -window.innerWidth,},{
      name: "toLeftTransition",to: {
        namespace: [
          "index","projects","bio"
        ]
      },],})

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

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

对如何使这项工作有任何想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

barbajs frontend javascript