javascript - 如何在页面之间重新初始化自定义 js 文件(Barba.js)?
问题描述
我有 Barba.js 在我正在开发的网站上工作,我已经调试了一些其他问题,但我注意到我的 jS 没有在页面之间重新初始化,这不是预期的行为。请在下面查看我的代码(出于 DRY 的目的,我删除了我的实际网站内容):
索引.html:
<head>
<!--- Default Page Values -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png" />
<title>TEST.</title>
<!--- Load Local Styles -->
<link type="text/css" rel="stylesheet" href="fonts/fontsauce.css" />
<link rel="stylesheet" href="css/globals.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/videoModal.css">
<!--- End Load Local Styles -->
<!--- Load Local Scripts -->
<script src="js/lib/jQuery/jquery-3.5.1.min.js"></script>
<script src="js/lib/anime/anime.min.js"></script>
<script src="js/lib/parallax/parallax.min.js"></script>
<script src="js/lib/barba/2.9.7/barba.umd.js"></script>
<!--- End Load Local Scripts -->
<!--- Load External Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js" integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ==" crossorigin="anonymous"></script>
<!--- End Load External Scripts -->
</head>
<body id="barba-wrapper" data-barba="wrapper">
<main class="barba-container" data-barba="container" data-barba-namespace="home">
// all my website content //
</main>
<script src="js/introParams.js"></script>
<script src="js/parallaxParams.js"></script>
<script src="js/content.js"></script>
<script src="js/videoModal.js"></script>
<script src="js/pageTransitions.js"></script>
</body>
pageTransitions.js:
barba.init({
transitions: [{
name: 'diffuse-transition',
leave(data) {
return gsap.to(data.current.container, {
opacity: 0
});
},
beforeEnter: ({ next }) => {
window.scrollTo(0, 0);
},
enter(data) {
return gsap.from(data.next.container, {
opacity: 0
});
}
}]
});
据我了解,问题是每次将新页面的内容加载到 DOM 中时,它都不会重新初始化我的其他脚本。有什么想法可以正确地重新启动我的其他脚本吗?
解决方案
就像您在beforeEnter
回调中重置滚动一样,您还需要从脚本中调用您的 init 方法以在新页面加载时重置它们。afterEnter
如果你需要访问新的页面 dom,你也有。来自 barba.js 文档:
barba.init({
views: [{
namespace: 'home',
beforeEnter() {
// re-init/reset script default function on before page load
myScriptInit();
},
afterEnter() {
// refresh parallax on new page content
parallax.refresh();
}
}]
});
我建议你看看barba.js 的生命周期来帮助你。
推荐阅读
- python - 使用高级 keras api 在 Tensorflow 中进行量化感知训练
- python - 为什么创建 multiprocessing.Pool 对象会尝试连接到 127.0.0.1: [port] 并且无法连接?
- c# - 使用c#将html标签插入括号中的字符串中
- python - 训练期间未在检查点中导出预处理中使用的 TF 集线器模块变量
- groovy - 当 EPIC customField 更改时更新链接问题 customField
- connman - 使用“connmanctl config”设置静态 IP,无需有线连接
- tensorflow - TensorFlow 服务性能缓慢
- python - 创建自定义卷积层并比较两个 keras 层
- coldfusion - 如何通过 CFHTTP 将此 API 调用发送到 Twilio Flow
- fortran - 写出数组解决了一个我不知道的原因