个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
30
4
我有 Barba.js 在我正在开发的网站上工作，我已经调试了一些其他问题，但我注意到我的 jS 没有在页面之间重新初始化，这不是预期的行为。请参阅下面的代码(出于 DRY 目的，我已删除了实际网站内容):
index.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 方法，以便在新页面加载时重置它们。如果您需要访问新页面 dom，您还可以使用 afterEnter。来自 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();
}
}]
});
我建议你看看lifecycle of barba.js来帮助你。
关于javascript - 如何在页面之间重新初始化自定义js文件(Barba.js)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64914024/
30
4
0
我正在尝试安装 BarbaJS为我的 GitHub 托管网站提供 JS 捆绑器。使用 CDN，我包含安装 BarbaJS 的行，但是当我打开网站时，我收到源映射错误: Source map error
我有 Barba.js 在我正在开发的网站上工作，我已经调试了一些其他问题，但我注意到我的 jS 没有在页面之间重新初始化，这不是预期的行为。请参阅下面的代码(出于 DRY 目的，我已删除了实际网站内
我有 Barba.js 在我正在开发的网站上工作，我已经调试了一些其他问题，但我注意到我的 jS 没有在页面之间重新初始化，这不是预期的行为。请参阅下面的代码(出于 DRY 目的，我已删除了实际网站内
我刚刚发现 Barba.js并发现它非常有用。它提供同一网站的 URL 之间的平滑过渡。 我整理了一个 Plunker ，出于某种我能找到的原因，它给了我一个“Uncaught ReferenceEr
我正在尝试获取 Barba JS , 旁边是 GSAP ，在我的 React 上实现网站。 作为引用，我已经关注了这个 video tutorial here ，本教程当然不在React . 这是我的
使用barba.js制作一个 SPA 网站，但我在更新页面内容后无法启动我正在使用的另一个插件 ( fullpage.js )。 现在我必须点击每个链接两次才能触发 fullpage.js 这是我在
滚动设置 我正在使用流行的scroll detection method在向下滚动时隐藏 nav 元素并在向上滚动时显示它。 $(window).scroll(function(){ curr
我使用下面 barba.js 文档中的代码在页面之间切换。 var FadeTransition = Barba.BaseTransition.extend({ start: function
我有一个带有链接的网站。当我单击链接时，我希望使用 jQuery 将页面平滑过渡到下一页。我让 barba DOM 中的 HTML 元素淡出。但是当下一页尝试加载时，除了 JavaScript 之外的
我正在探索使用 AJAX 来提供优雅的页面转换的选项。 我尝试了两种方法，第一种是从该页面获取的手动编码选项 (https://codyhouse.co/gem/animated-page-trans
我正在尝试使用 module.exports 将我的 barba View 拆分为不同的模块。 这是我的 View 代码。 var Barba = require('barba.js'); var H
我是第一次尝试使用 Barba.js。我基本上只希望每个页面都有一个转换(显示 data.next.namespace 的转换 div 滑入和滑出)。唯一的异常(exception)是预加载屏幕仅在首
我使用 barba.js在不重新加载的情况下浏览页面并创建流畅的动画。 这是一个 example . 以及来自示例的简短代码: document.addEventListener("DOMConten
我正在使用 barba.js用于页面转换，我也使用 animate.css ，我试图设置过渡的持续时间，但是该函数忽略了持续时间。 Main.js fadeIn: function() {
我正在试验 Barba.js 的页面转换。当我尝试运行此代码时，我收到“已阻止尝试使用 history.pushState() 更改 session 历史记录 URL”的错误消息。我相信这与 DOM
我是一名优秀的程序员,十分优秀！