我是第一次尝试使用 Barba.js。
我基本上只希望每个页面都有一个转换(显示 data.next.namespace
的转换 div 滑入和滑出)。唯一的异常(exception)是预加载屏幕仅在首页加载时出现一次。
once
Hook 有效,但我对 default
转换有问题。当我单击链接时,DevTools 中的控制台没有显示任何错误,但加载的页面始终是当前页面。
我使用全局 barba.hooks.enter
来 console.log 下一个 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
);
},
},
],
});
最佳答案
我意识到我以完全错误的方式定义了钩子(Hook)。
从 enter(data){}
更改为 enter({ current, next })
并将 data.next.namespace
更改为 next.container.dataset.barbaNamespace
为我解决了这个问题。
关于javascript - Barba.js (v2.9.7) 重新加载当前页面而不是下一页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64850869/