问题标签 [barbajs]

我正在使用 barba.js 淡入新页面。代码必须放在 barba 包装器 div 之间。但是，当我单击指向新页面的链接时，新页面会淡入与上一页所在的位置相同的位置。因此，如果用户单击链接，则新页面将在 near 中加载，这是我不想要的。

如何让新页面加载到顶部？

我在堆栈上找到了关于scrollRestoration函数的答案，但我仍然不明白如何使它工作。

有人可以帮我编译下面的 js 代码，添加一些 css 或 html 来解决这个问题吗？

看看： https ://pasteboard.co/Ja33erZ.gif

这里还有一个代码笔来检查我的问题（html，css）： https ://codepen.io/cat999/project/editor/AEeEdg

这里的问题：

https://i.stack.imgur.com/AMOLF.gif

我的 index.html 上一切正常。在第一个 .onload 页面上，所有图像都是可拖动的并且遍布整个页面。但是，当我转到 ABOUT.html 页面并返回 INDEX.html 时，我的脚本看起来不再工作了，我只能看到一个甚至无法拖动的图像。

我的项目在这里： https ://codepen.io/cat999/project/editor/AEeEdg

如何解决问题？有人可以帮我修复我的代码吗？

我尝试在 barba.init 函数内的 main.js 文件中添加以下 JS 代码，但没有奏效：

语境：

我正在使用 barba js 在 wordpress 网站上进行一些页面转换，每次页面更改时我都必须加载一些脚本，主要是来自 wordpress 插件的一些 js/css 文件，以便 ajax 搜索工作。我做了一个接收脚本 src/href 然后将元素添加到头部的方法。问题可能出在我糟糕的代码结构或我不知道老实说的库中。

问题：

该代码只运行我调用的第一个脚本，正如我上面所说，我不知道它是来自我的代码还是来自库！

代码：

起初我以为我需要一些超时才能使代码工作，所以我这样做了

这是原始代码（没有超时）：

提前致谢 ！

编辑：这是方法

我正在试验 Barba.js。我想要做的是当从一个页面转换到另一个页面时，我想看到 3 个颜色页面的动画首先加载为画布效果。不幸的是，只有第一个画布在加载时发生，但其他三个不存在。我在 main.js 中尝试了一些组合，我向您展示其中一种。

你可以在这里看到这个

如何以不同的延迟运行加载屏幕一、加载屏幕二和加载屏幕三，一个接一个地使用 barba.js？

所以我有这个基本的网站模板，我在 Barba.js 上的视频中使用它来诊断这个问题是由于包裹还是 barba。当我在不与包裹捆绑的情况下运行代码时，转换和链接都工作得很好。但是，当我与 parcel 捆绑并运行 npm run dev 时，我的 href 链接停止工作，转换也停止工作，而控制台显示 0 个错误。这是4个代码文件。

about.html

索引.html

main.css

main.js

我正在尝试BarbaJS为我的 GitHub 托管网站安装 JS 捆绑器。使用 CDN，我包含安装 BarbaJS 的行，但是当我打开网站时，我收到源映射错误：

源映射错误：错误：请求失败，状态为 404 资源 URL：https://cdn.jsdelivr.net/npm/@barba/core@2.9.7 源映射 URL：barba.umd.js.map

他们的文档似乎没有提到这个错误。

这是我安装库的脚本标签：

我已经建立了一个网站，现在想在几个内容页面上添加幻灯片加载功能，而不是整个网站。

我曾尝试使用 Barba.js 转换，但它不起作用。我不确定它是否与我网站上已有的 jQuery 脚本冲突。

有没有一种更简单的方法可以在页面之间创建这种形式的滑动过渡，而不是部分或 div 只是 html 页面（index.html > about-us.html 等等......）？

我正在尝试从 barber.js 站点实现基本的 GSAP 淡入/淡出演示。

测试页一的标记如下：

测试页2的标记如下：

在每个页面的底部使用以下 JS：

离开当前页面时，旧元素会淡出 OK，但是新元素会出现在早期的一小部分下方，这意味着我有两个元素，当旧元素消失时，新元素会跳起来？

有没有办法让新的只有在旧的完成后才开始出现？

我正在使用 Barba js 和 alpine 创建页面转换。我正在尝试在容器转换之前将特定的 js 脚本添加到容器中，但我似乎无法做到正确。

我一直在尝试使用 Barba 钩子添加脚本，然后在输入时触发自定义事件以触发 alpine 运行代码。添加了脚本并触发了 alpine get，但似乎没有及时出现 alpine。如果我添加延迟，那么它工作正常。我想知道是否有一种方法可以在转换之前预加载脚本并将其附加到下一个容器？确保脚本在转换之前实际上已经完成加载？

这就是我目前正在做的事情。

我的 html 代码看起来像这样

example() 调用运行一些代码，如果在第一个页面加载时作为普通脚本标记包含这些代码，这些代码可以完美运行，但如果它在转换的页面上，那么它根本不起作用。通过这种方法加载它适用于每个页面加载，但只能手动添加延迟，这不是解决方案。代码非常庞大（在本例中它是导出的 lottie 动画代码），所以我真的希望能够只将它添加到需要它的页面。我确实看到它正在处理中（https://github.com/barbajs/barba/issues/485），但这似乎还没有发生。

我想创建一个圆形页面转换，如本网站导航所示我知道我需要使用 barba.js 但是我不知道从哪里开始一无所获。谁能建议从哪里开始寻找如何创建这个我以前从未使用过 javascript 并且对 HTML 和 css 很陌生

编辑：抱歉，我应该提到我已经用单独的页面完成了我的网站，现在我想整理一下它们之间的转换。