Javascript Barba.js(v2.9.7)重新加载当前页面,而不是下一个页面
我第一次尝试使用Barba.js。 我基本上只希望每个页面有一个转换(转换div显示Javascript Barba.js(v2.9.7)重新加载当前页面,而不是下一个页面,javascript,barbajs,page-transition,Javascript,Barbajs,Page Transition,我第一次尝试使用Barba.js。 我基本上只希望每个页面有一个转换(转换div显示data.next.namespaceslides in and out)。唯一的例外是预加载屏幕仅在第一页加载时出现一次 once钩子可以工作,但是我对默认值的转换有问题。当我单击链接时,DevTools中的控制台不会显示任何错误,但加载的页面始终是当前页面。 我使用全局barba.hooks.enter来console.log下一个数据.next.namespace,在立即重新加载当前页面之前,它工作了几分之
data.next.namespace
slides in and out)。唯一的例外是预加载屏幕仅在第一页加载时出现一次
once
钩子可以工作,但是我对默认值的转换有问题。当我单击链接时,DevTools中的控制台不会显示任何错误,但加载的页面始终是当前页面。
我使用全局barba.hooks.enter
来console.log下一个数据.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
);
},
},
],
});
我意识到我用一种完全错误的方式定义了钩子
将enter(data){}
更改为enter({current,next})
和data.next.namespace
更改为next.container.dataset.namespace
为我解决了这个问题