GSAP 和 Vanta.js 后未重新加载巴尔巴 JS 过渡
好的，我的 中运行了一个 Vanta.js 后台，看起来棒极了。然后我介绍了使用 Barba 和 GSAP 进行动画的页面转换，效果也很好。但回到我的索引后，我发现 VantaJS 没有再次加载。关于巴尔巴的问题很少，正确回答的更少。
这是我迄今为止尝试过的方法：
- 每次使用
window.onload和appendChild添加 Vanta 库。 - 使用 Barba 钩子在“after”钩子上重新加载库。
- 以正确的顺序将所有脚本发送到我的 html 底部。
以下是我用作示例的一些问题：
如何在页面之间重新初始化自定义js文件（Barba.js）？
实现这些都没有运气。
如果您认为 Barba 确实是问题所在，我对其他过渡库持开放态度。
编辑#1 所以我在 BarbaJS Github 上发现了同样的问题，所以我尝试在我的 barba.init 中实现这个问题，但仍然没有成功：
async beforeEnter(data) {
const nextEl = data.next.container;
if (nextEl) { //Just a little check to make sure we don't run this on an error
// Find all scripts in the next container
const nextScripts = nextEl.querySelectorAll('script');
//Iterate over incoming script tags
nextScripts.forEach(nextScript => {
const src = nextScript.src;
//Duplicate check - no need to re-execute scripts that are already loaded.
if (document.head.querySelector('script[src="' + src + '"]') == undefined) {
//Have to create a new script element in order for the browser to execute the code
const newScript = document.createElement('script');
newScript.src = src;
newScript.async = true;
document.head.append(newScript);
nextScript.remove(); // Cleaning up the script in the container;
}
})
}
},编辑#2 尝试加载内联脚本（这就是 VantaJS 的加载方式），但由于明显的原因，VANTA 未定义，因为我是从外部 js 文件调用的。
window.Barba.currentInlineScripts = [
VANTA.HALO({
el: "#vanta-canvas",
mouseControls: true,
touchControls: true,
gyroControls: true,
xOffset: 0.18,
scale: window.devicePixelRatio,
scaleMobile: 1.00,
backgroundColor: 0x0A0613,
baseColor: 0x2280D0
})
]
$(function () {
barba.init({
sync: true,
transitions: [
{
afterLeave({
current,
next
}){
if (next.container) {
// Remove old scripts appended to the head
window.Barba.currentInlineScripts.forEach((currentInlineScript) => {
currentInlineScript.remove()
})
// Find all new scripts in the next container
const nextScripts = next.container.querySelectorAll('script');
// Iterate over new scripts
nextScripts.forEach((script) => {
// Check if it is an inline script
if (!script.src) {
// Clone the original script
const newScript = script.cloneNode(true)
// Create a new <script> element node
const newNode = document.createElement('script');
// Assign it innerHTML content
newNode.innerHTML = newScript.innerHTML
// Append to the <head>
const element = document.head.appendChild(newNode)
// Save for later
window.Barba.currentInlineScripts.push(newNode)
}
// Remove the inline script
script.remove()
})
}
},
async leave(data) {
const done = this.async();
pageTransition();
await delay(1000);
done();
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
},
},
],
});
});Ok so I got a Vanta.js background running in my <main> which looks awesome. Then I introduced a page transition using Barba and GSAP for animations, which are working fine too. But after going back to my index I found that VantaJS isn't loading again. There are very few questions about Barba and even less answered correctly.
Here's what I've tried until now:
- Use
window.onloadwithappendChildto add the vanta libraries each time. - Use Barba hooks to reload the libraries on "after" hook.
- Send all scripts to the bottom of my html in correct order.
Here are some SO questions I've used as example:
How to reinit custom js files between pages (Barba.js)?
Scripts are not loading after the page transition in Barba.jS
JS content not working after a page transition using Barba.JS
No luck implementing any of these.
I'm open to other transition libraries if you think that Barba is the problem definitely.
Edit #1
So I found my same issue on BarbaJS Github so I tried implementing this inside my barba.init but still no luck:
async beforeEnter(data) {
const nextEl = data.next.container;
if (nextEl) { //Just a little check to make sure we don't run this on an error
// Find all scripts in the next container
const nextScripts = nextEl.querySelectorAll('script');
//Iterate over incoming script tags
nextScripts.forEach(nextScript => {
const src = nextScript.src;
//Duplicate check - no need to re-execute scripts that are already loaded.
if (document.head.querySelector('script[src="' + src + '"]') == undefined) {
//Have to create a new script element in order for the browser to execute the code
const newScript = document.createElement('script');
newScript.src = src;
newScript.async = true;
document.head.append(newScript);
nextScript.remove(); // Cleaning up the script in the container;
}
})
}
},Edit #2
An attempt loading inline script (that's the way VantaJS is loaded) but for obvious reasons VANTA isn't defined because I'm calling in from an external js file.
window.Barba.currentInlineScripts = [
VANTA.HALO({
el: "#vanta-canvas",
mouseControls: true,
touchControls: true,
gyroControls: true,
xOffset: 0.18,
scale: window.devicePixelRatio,
scaleMobile: 1.00,
backgroundColor: 0x0A0613,
baseColor: 0x2280D0
})
]
$(function () {
barba.init({
sync: true,
transitions: [
{
afterLeave({
current,
next
}){
if (next.container) {
// Remove old scripts appended to the head
window.Barba.currentInlineScripts.forEach((currentInlineScript) => {
currentInlineScript.remove()
})
// Find all new scripts in the next container
const nextScripts = next.container.querySelectorAll('script');
// Iterate over new scripts
nextScripts.forEach((script) => {
// Check if it is an inline script
if (!script.src) {
// Clone the original script
const newScript = script.cloneNode(true)
// Create a new <script> element node
const newNode = document.createElement('script');
// Assign it innerHTML content
newNode.innerHTML = newScript.innerHTML
// Append to the <head>
const element = document.head.appendChild(newNode)
// Save for later
window.Barba.currentInlineScripts.push(newNode)
}
// Remove the inline script
script.remove()
})
}
},
async leave(data) {
const done = this.async();
pageTransition();
await delay(1000);
done();
},
async enter(data) {
contentAnimation();
},
async once(data) {
contentAnimation();
},
},
],
});
});如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论