3

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

once钩子有效，但我在过渡default时遇到问题。当我单击一个链接时，DevTools 中的控制台没有显示错误，但加载的页面始终是当前页面。我使用 global barba.hooks.enterto console.log nextdata.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
          );
      },
    },
  ],
});
4

1 回答 1

1

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

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

于 2020-11-16T02:12:36.810 回答