Barba.js (v2.9.7) 重新加载当前页面而不是下一个

Question

我是第一次尝试使用 Barba.js。 我基本上只希望每个页面都有一个过渡（显示data.next.namespace 的过渡div 滑入和滑出）。唯一的例外是在第一页加载时仅出现一次的预加载屏幕。

once 钩子有效，但我对default 转换有问题。当我单击一个链接时，DevTools 中的控制台没有显示错误，但加载的页面始终是当前页面。 我使用全局barba.hooks.enter 来控制台记录下一个data.next.namespace，它工作了几分之一秒，然后立即重新加载当前页面。 （代码如下）

我不知道我的代码有什么问题，非常感谢您的宝贵帮助。

提前致谢！

barba.init({
  transitions: [
    {
      name: "once-home",
      to: {
        namespace: "home",
      },
      once() {
       //Do something cool
      },
    },
    {
      name: "default",
      enter(data) {
        const transitionElem = document.querySelector(".transition ");
        const transitionTitle = document.querySelector(".transition_title ");
        transitionTitle.innerHTML = data.next.namespace;
        const tl = gsap.timeline({
          onComplete: () => {
            transitionTitle.innerHTML = "";
          },
        });

        tl
          .set(transitionElem, {
            clearProps: "all",
          })
          .set(transitionTitle, {
            x: 100,
          })
          .to(transitionElem, {
            duration: 1.5,
            x: "0",
            ease: "power4.inOut",
            onComplete: () => {
              data.current.container.style.display = "none";
            },
          })
          .to(
            transitionTitle,
            0.5,
            {
              x: 0,
              opacity: 1,
              ease: "power4.inOut",
            },
            0.1
          )
          .from(next.container, {
            duration: 0.1,
            opacity: 0,
            ease: "power2.inOut",
          })
          .to(
            transitionElem,
            {
              duration: 0.7,
              x: "100%",
              ease: "power4.inOut",
            },
            1
          )
          .to(
            transitionTitle,
            0.7,
            {
              x: -100,
              opacity: 0,
              ease: "power4.inOut",
            },
            0.8
          );
      },
    },
  ],
});

Answer 1

我意识到我以完全错误的方式定义了钩子。

从enter(data){} 更改为enter({ current, next }) 和data.next.namespace 更改为next.container.dataset.barbaNamespace 为我解决了这个问题。