问题标签 [barbajs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
144 浏览

javascript - 如何使用 Barba.js 从单个页面进行多个页面转换

最近,我遇到了 Barba.JS 库,想知道如何使用它从单个页面添加多个页面转换?正如您从 Codepen 演示中看到的那样,如果我单击导航链接或图像,则会发生白色过渡的方形块。如果用户单击导航链接,可能会发生相同的页面转换,但是当用户单击图像时,如何添加不同的页面转换?有什么帮助吗?

演示: https ://codepen.io/bootstrap007/pen/zYwrOXR

0 投票
0 回答
67 浏览

javascript - 在 Django 中使用 Barba

我的问题

将 Barba js 动画库合并到我的 Django 项目中后,它开始崩溃。当我点击导航链接时,我当前的登录名将被随机注销。该导航链接正在触发动画。


我的脚本.js


我的 base.html

导航已编辑,但如果您想查看完整的导航,请告诉我。


当我慢慢点击时,一切正常;链接正在加载,动画正在触发页面正在转换到下一个 href,并且地址栏准确地反映了 href。

但是,当我快速单击时,我突然退出了。


一个例子

当我登录后在主页时,地址栏是:

当我开始快速连续随机单击链接时,它可以是任何页面,但地址栏的一个示例是:


更新

终于设法在 Web 开发工具控制台中看到了一个错误。Web 开发工具指向“o.send()”,表示加载资源失败,错误代码为 404

巴巴核心

安慰

0 投票
0 回答
94 浏览

javascript - Barba.js 上滑动画故障

我正在尝试使用点导航使用 Barba.js 框架进行一些基本的幻灯片转换。向下滑动的动画效果很好,但是动画向上滑动的问题是,在我开始向上滑动过渡时,未来页面会在当前页面前面闪烁。我真的很绝望,因为我无法在官方文档中找到有关该问题的任何帮助。在这里解决了同样的问题?

这是源代码的链接:https ://github.com/lukasbriza/StackOwerflow_problem.git

0 投票
0 回答
102 浏览

javascript - 如何使用 Barba 删除 URL 中的扩展名

我在一个带有 PHP 的项目中使用 Barba,我想删除 URL 中的 '.php' 扩展名

例如,我尝试将hrefof all更改<a>为,但随后出现了 2 个问题:/my-page.php/my-page

  • 当我悬停链接时,控制台中的 Barba出现错误 406
  • 当我单击链接时,页面加载时没有 Barba(无页面转换)。

我还在.htaccess文件中尝试了一些重定向 301,但我得到了完全相同的问题。这是我的.htaccess(在这里找到重定向:https ://stackoverflow.com/a/13225718/16478297 ):

我在文档中找不到任何东西,甚至可能吗?

0 投票
0 回答
157 浏览

javascript - Barba.js 转换在真实服务器上不起作用

我是 barba.js 的新手,而且很好。在本地主机上一切正常,但是当我开始在真实服务器/主机上运行时,页面之间的动画不起作用。我不知道为什么不工作。

这里的页面:

https://globalpsolutions-demo.darkredgm.com/

这是所有页面的页脚:

`

`

它应该让 div 向左滑动,然后向右滑动,但只需单击并重新启动页面,而不是它应该如何在本地工作。

我正在尝试移动一些元素,更改一些内容,但无法正常工作,而且我不知道如何修复它,或者我必须在主机上修改某些内容才能正常工作。谢谢。

0 投票
1 回答
291 浏览

javascript - Uncaught (in promise) TypeError: _this.settings is not a function - 使用 barba.js 和 three.js

我正在使用 barba.js 开发一个网站。在这个页面“滑块”中,我有一个 three.js 场景。如果我打开页面一切都很好。如果我从滑块导航到主页,然后返回滑块页面,我会收到此错误:

Uncaught (in promise) TypeError: _this.settings is not a function

控制滑块页面的脚本是 Sketch.js。

错误是这样的:

和第 193 行:

在这里,我确实有控制 Barba.js 中路由的 Router.js 脚本:

这里是 Application.js 脚本:

在此先感谢大家。

0 投票
0 回答
68 浏览

javascript - 当页面加载速度快于转换时间时,Barba.js 偶尔会跳过转换

我有以下站点 - https://pinelake.org - 我挂接到 barba.js 实例以触发 GSAP 页面“擦除”转换。我对 Barba 比较陌生,我遇到了一个问题,如果页面加载时间足够长,则转换按预期工作,但如果页面加载得更快(例如当它被浏览器缓存时)它只是决定完全跳过动画。下面是我的 barba 初始化函数 -

有人对我能做些什么来解决这个问题有一些见解吗?谢谢!

0 投票
0 回答
147 浏览

javascript - 表单和其他组件不适用于 swup.js 或 barba.js

我目前正在编写一个带有所有页面通用的页眉和页脚的移动应用程序。我正在尝试添加页面转换以使应用程序更流畅,并避免每次用户从一个页面移动到另一个页面时静态重新加载。这是在 Django 上运行的,我只有 javascript 的基本知识。

所以,我尝试了 swup 和 barba 两者都非常好用,没有太多复杂性,除了一个简单地杀死应用程序功能的特定点。主要问题涉及我的所有表单,如果我在不完全刷新页面的情况下返回相关页面,这些表单将不再起作用。

更准确地说,承认我在“主页”页面并移动到“设置”页面,如果我现在回到“主页”,则所有表单都不再起作用,包括我的 html 的其他部分,具体取决于 css 或 javascript .

我尝试在每个页面的每个 swup/barba 容器中移动所有 css 和 javascript 链接标签,以使它们每次都重新加载,但它不起作用。

有谁可以告诉我为什么这不起作用?

预先感谢您的帮助 !

0 投票
1 回答
62 浏览

javascript - Barba.js:scrollRestoration 和 Wordpress 问题

我正在尝试使用 barba.js 在我的主页和单页之间放置一些动画(如果 wordpress 有更好的效果,请告诉我),实际上,当我点击我的帖子时,单页会像另一页一样滚动,即使我放了它也会恢复滚动

0 投票
1 回答
628 浏览

javascript - 使用 Barba.JS 进行页面转换后 JS 内容不起作用

我正在使用 Barba.js 和 GSAP 为我的网站创建页面转换。在看了一些教程并摆弄了一下之后,我设法在两个页面之间创建了一个幻灯片过渡。事情是我还有其他 javascript 内容,用于每个页面上的其他功能元素。在第一页加载时,一切似乎都正常。

然后我单击一个链接转换到下一页,转换进行得很顺利,但突然之间,我在同一个 JS 文件中编写的所有元素都不再起作用了。

我仍然可以在每个页面之间完美转换,但其他 JS 内容似乎都没有工作。我在控制台中没有收到任何错误,所以我不知道这里到底发生了什么。

这是我的 Barba 初始化的样子。

AnimationEnter、AnimationLeave 和 HomeAnimation 方法只是链接到 GSAP 动画。例如,这里是 AnimationLeave 的样子:

任何帮助表示赞赏!