我正在barba JS我的React网站上实施，但似乎无法让文件在页面上工作。作为参考，我的文件夹结构如下：

在我的index.js文件上，我正在尝试使用import我的anim.js脚本，以便将文件应用于我的所有pages. 但是，在编译时，我得到一个'delay' is not defined no-undef错误anim.js，即使delay已定义（因为我正在导入gsap）。

Homepage.js（Contact.js类似，唯一不同的是data-barba-namespace）

动画.js

helpers.js

index.js

index.html（显示barba包装器）

近两个星期以来，我一直在网上搜索 GitHub，她在堆栈溢出中为我下面提到的问题寻找正确的解决方案，我真的对 barba 很着迷，但不幸的是我无法让它为我工作。

很抱歉，这是一个很长的帖子。我希望这里有人能帮助我。

我正在使用带有 WordPress 的 barba.js v2（不使用 elementor，我创建了一个从头开始创建的自定义主题）。我已经设置了 functions.php 来将所有页面上的全局样式和脚本以及各个页面上的特定于页面的脚本和样式排入队列。

这是我的示例目录：

网站页面：

• 主页 - front-page.php
• 新闻/博客 - home.php
• 关于 - page-templates/page_about.php
• 单一新闻 - single-post.php
• 团队 - page-templates/page_team.php
• 标题
• 页脚
• 函数.php
• 所有 css & js 都在 assets/css & assets/js 文件夹中

我正在使用的 Javascript/库：

全局脚本和样式：

• 样式.css
• bootstrap.min.css
• Jquery 3.6.0（延迟）
• main.js (defer) (用于标题导航菜单)
• Barba-core v2（延迟）（来自 cdn.jsdelivr）
• gsap.min (延迟) (cdn)
• page-transition.js（延迟）（用于 barba.init()）

以下是页面特定的全局脚本和 CSS 

• Slick.js（应该只在主页、关于和新闻页面加载）
• Bootstrap.js（应仅在团队页面中加载）
• Typewritter.js (应该只在主页加载)

个别页面特定的样式和脚本：

• Home.css 和 home.js（包含 slick 和 typewritter 配置）
• about.css & about.js（包含漂亮的配置）
• 团队.css
• news.css 和 news.js（包含多个 slick 配置）
• 单post.css

问题：

• 无法在所需页面上应用 slick 和 typewriter js
• 当我加载网站主页然后转到“关于”页面时，它可以工作。如果我重新加载关于页面，它也可以工作。重新加载关于页面后，当我回到主页时，如果我回到关于页面，光滑的滑块会中断。 
• 在主页上，打字机js最初是加载的，但是当我从任何其他页面回到主页时，它就不起作用了。

这是我的 page-transition.js

这是我的 header.php

这是我的 home.js

这里是 about.js

这是footer.php

以下是我遵循的教程：

• https://ooohboi.space/barba/barba-main-page

• https://www.fjobeir.com/implement-barba-v2-with-wordpress/

• https://www.fjobeir.com/implement-barba-js-with-wordpress/

• https://thisisadvantage.com/page-transitions-using-barba-js-wordpress-elementor/

通过参考上述教程，我能够解决我遇到的许多问题，但对于一些我无法使其工作。

如果有人帮助我理解我在这里做错了什么并告诉我如何解决这个问题，那将是一个很大的帮助。谢谢

我正在尝试在我的网站上实现Barba JS和GSAP 。React

作为参考，我已经按照这个视频教程here，这个教程当然不在React。

这是我的文件夹结构，展示了此过渡效果的所有相关文件：

我安装了以下软件包：

• gsap - 版本3.8.0
• @barba/core - 版本2.9.7

当前结果

• 没有控制台错误，也没有编译错误。

• 切换页面时，没有过渡。几乎感觉就像barba没有启动。

演示：

由于演示涉及一些文件，我在这里创建了一个代码框。

编辑：

更新了我的barba转换代码并添加了debug: true. 然后，将鼠标悬停在我的联系页面按钮上时，控制台显示错误：[@barba/core] Error: Fetch error at XMLHttpRequest.o.onerror？

我正在使用 barba.js 为转换做一个 webpack 应用程序。我的块没有加载导航的应用程序，而是在应用程序加载时加载。

例如，如果我直接在此 url“localhost:8080/portfolio.html”上打开应用程序，则会读取“portfolio”块。但如果我在“portfolio”菜单链接上打开此页面（链接上的 event.preventDefault()点击），这个块没有加载。

为什么 ？

拜托，我需要帮助！谢谢

我一直在尝试使用Barba JS库并遇到了问题。我使用 div 作为光标，将鼠标悬停在文章缩略图上时，光标会展开为按钮。为此，我在 .js 文件中使用 JQuery .mouseenter 和 .mouseleave。一切都在第一个页面加载时完美运行，但在页面转换后 .mouseenter 不再工作。即使我转换回第一个加载页面。脚本文件在所有页面上都正确加载，自定义光标的代码工作正常并且存在于同一个文件中。

我怎么解决这个问题？

这是光标的代码。

这是光标文章悬停动画的JS。

我在网站导航中结合使用 SearchWP Live Ajax 搜索和 BarbaJS。在页面转换（不刷新）之后，导航也被重新添加，这意味着我需要重新初始化 SearchWP Live Ajax 搜索。我在文档中找不到方法。

https://searchwp.com/extensions/live-search/

我正在尝试在网站上实现barba.jsHubSpot。

考虑以下两页：

1. 资源
2. 顾客

使用我当前barba.js的实现，这是我正在经历的当前流程：

1. 我访问该resources页面（不是通过转换到它，而是通过直接访问它/resources）。
2. 在这一点上，我所有js的工作（slick-sliders，滚动功能等）
3. 然后我使用导航访问customers页面。页面加载，但该页面的所有js特定模块和表单都不起作用。

简而言之，js对于我transition不工作的页面。

为了解决这个问题，我要做的是重新scripts加载container beforeEnter().

见下文：

但是，我的电流beforeEnter()仍然产生相同的结果。有什么办法吗？

编辑

为了提供更多详细信息，此barba.js实现适用于HubSpot站点。当您在其中创建custom modules时，它会在页面上（在标签中）HubSpot吐出该模块的 JS 。script例如，下面是 JS 在页面上的呈现方式：

因此，当barba执行转换时，我需要重新加载所有具有src和内联呈现的 JS（如自定义模块）。

基于User863反馈的最新方法

当前行为：与以前相同（页面更改时模块的脚本被破坏）。例如，带有slick slider's 的模块不起作用（slick未启动）。

所以我有一个索引文件，其中包含很少的 js 文件，例如 Gsap 和 Barba JS。但是我有一个内页，其中包含一些额外的 js 文件，例如 locomotive.js 和 OWLcarousel.js，请注意这两个 Js 文件（locomotive.js 和 OWLcarousel.js）不包含在索引页面中，因为它们不是必需的。问题是内页在完成索引页面转换后打开，但没有加载这两个 JS 文件（locomotive.js 和 OWLcarousel.js）。结果，机车滚动和 OWL 旋转木马都不起作用。但是，如果我刷新一次内页，那么这两个 Js 文件（locomotive.js 和 OWLcarousel.js）正在加载并且一切正常。那么如何在 Barba.Js 中加载内页的 JS 文件呢？

更新：我创建了一个最小的演示，如果单击主页上的标题文本并导航到内部，您可以看到内部页面没有加载机车的 JS 和 CSS 以及 OWL 轮播。但是如果刷新页面，那么机车和猫头鹰旋转木马在内页都可以正常工作。如何解决这个问题？我已将建议的更改添加到 JS 文件 ( https://bootstrap-awesome.com/barba-test1f/js/main-test.js ) 演示链接：https ://bootstrap-awesome.com/barba-test1f/索引-test.html

因此，我尝试以以下相同的格式加载其他 JS 文件，但没有任何反应。有人可以指导我吗？

更新 @wouch

以下是我尝试过但仍然无法正常工作的方法。另外，如何加载机车外部CSS？

JS：bootstrap-awesome.com/barba-test1f/js/main-test.js

演示：https ://bootstrap-awesome.com/barba-test1f/index-test.html

我创建了一个最小的演示，你可以看到如果用户点击主页上的标题文本并导航到内页，内页没有加载机车的 JS 和 CSS 以及 OWL 轮播。但是如果用户刷新内页，那么机车和猫头鹰旋转木马都可以正常工作。如何解决这个问题？我已将建议的更改添加到 JS 文件（https://bootstrap-awesome.com/barba-test1f/js/main-test.js）

任何帮助将不胜感激。

演示链接：https ://bootstrap-awesome.com/barba-test1f/index-test.html

我正在尝试在网站上实现barba.jsHubSpot。

问题HubSpot在于它使我们与标签中的自定义js相关forms或js相关。modules<script><script>

因此，目前，在我的barba实现中，例如，如果我转换到带有HubSpot表单的页面，该表单将不会显示并且不会js与我的模块相关（例如slick js，它们也不起作用。

使用下面定义的钩子（来自文档），我添加了一个ajax调用以尝试重新加载scripts已src定义的钩子。但是，我无法测试这是否有效，因为js我的自定义模块不起作用。

问题是，有没有办法让我在scripts没有src定义的情况下重新加载？

这是我当前的实现：

这是一个工作演示

• 第 1 页
• 第2页

按着这些次序：

1. 点击page 1。注意HubSpot表单是如何加载的。
2. 点击page 2
3. 注意slick slider模块如何不工作
4. 现在刷新page 2，你会看到slick工作正常。
5. 导航到page 1，您会看到该表单现在不起作用。

问题的视觉：