问题标签 [swup]

我正在测试Swup.js

据我所知，它不适用于相对链接。像这样;

DOM 中链接的屏幕截图

为此，您需要输入带有完整路径的 URL。但这可能是不可取的。相对论经常被使用，尤其是在带有 HTML 内容的设计中。

当我执行以下操作时它会起作用。

Turbolinks并非如此。这是什么原因？我需要做任何调整吗？谢谢。

我的 index.html

我的 page.html

我需要 Javascript Swup 库的帮助。单击“下一步”按钮时，Swup 会启动动画，但不会加载下一页。我使用 Laravel 框架。

这是我的布局，其中包含 Swup 的容器：

单击第 32 行按钮时，我调用下面的脚本

swap.loadPage 第 97 行应该加载下面的页面，但只有动画开始并且页面永远不会加载

我试图在使用 Swup 进行页面转换时破坏并重新加载我的 Flickity 幻灯片，但我运气不佳。这是我的 js 文件：

但是当我尝试这个时，我得到了错误flkty is not defined。任何人都可以给我任何指示吗？

我看过一些关于 Swup 的教程；

https://www.youtube.com/watch?v=mWeYMyN5-oo&t=134s

https://www.youtube.com/watch?v=eVwH3VL1EsA

它们对于基础非常好，我设法实现了一些相当基本的动画。但是，我想采用不同的动画从 From-To 其他页面，而不是对所有页面应用相同的动画。

我确实查看了文档； https://swup.js.org/getting-started/how-it-works

但是，只有一部分对我有意义。我知道可以创建自定义动画，但文档没有向像我这样的菜鸟解释应该用于定义自定义动画并将其应用于特定链接的语法示例（在我的这个阶段知识，我倾向于学习我的例子）。毫无疑问，我会继续研究文档和实验，如果我碰巧自己解决了问题，我会在这里发布答案。但是如果我没有找到答案，并且有人知道该怎么做，那么请你帮忙，因为它不仅会帮助我当前的项目，而且正确的答案也会帮助我“逆向工程”以一种能让我理解文档的方式回答。

问题的标题说明了一切，swupjs 文档说您可以使用以下对象定位链接：

这里的问题是我只想定位导航中的链接，而不是所有页面上的所有链接。我尝试过这样的事情，获取所有 href 属性，例如：

我也尝试将 href-s 作为数组，并为不同的链接创建完整的行：

如果更容易获得解决方案，这是链接示例：

我刚刚开始使用 swup.js。我正在尝试自己实现它。一切顺利，但是当我点击一个链接时，它是动画但没有前进到下一页（链接页面）。它就停在那里。控制台说一些错误..请帮我清除它。我的html在下面

我的 CSS 是

当我点击一个链接时，它只是淡出并且不会转到另一个链接的页面..我的控制台说

我究竟做错了什么。你能指出我的问题吗？

我的问题：

我正在尝试将 Swup 库与 Django 的模板引擎一起使用，并且一切正常；除了获取新内容。

动画效果很好；我可以看到我的内容逐渐淡出。获取请求的地址也可以正常工作；我可以看到我的控制台中返回了 200 的 HTTP 响应代码。但是，主要内容在淡出之后并没有被替换。

Django 渲染示例：基本 URL：http: //127.0.0.1 :8000

在我的 urls.py 中：

值得注意的是：使用开发工具，将鼠标悬停在渲染的 href 上时，它会显示http://127.0.0.1:8000/

我在尝试调试时遇到的另一件奇怪的事情是我的 html 元素添加了以下属性，但即使在动画结束后它仍然存在。

Swup 配置或使用的任何其他相关代码：

脚本加载完美；我能够在我的开发人员工具中的 Sources 选项卡下看到它们。

在创建此问题之前，我执行了以下操作：

• [x] 检查类似/相关问题的已关闭问题。
• [x] 按照文档中的说明更改 LINK_SELECTOR。
• [x] 将 href 更改为在开头使用 '/' 以便将其拾取。

我已经尝试并用尽了所有可能的解决方案，在谷歌搜索和堆栈溢出中也找到了解决方案。如果有任何建议，请给我指出更合适的资源！谢谢你读到这里！

我正在尝试将 swup js 与 React js 一起使用。当我导入 swup 并添加时const swup = new Swup(); ，它显示以下错误。我该如何解决。我是这样添加的

错误类型错误 ：无法将属性“responseURL”设置为空

有人可以帮我解决这个问题。

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

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

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

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

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

预先感谢您的帮助 ！

我正在尝试在我的简单 Swup ( https://github.com/swup/swup ) 站点上使用 Alpine ( https://github.com/alpinejs/alpine )。目前我正在尝试使用 Siema ( https://pawelgrzybek.github.io/siema/ ) 实现轮播。

在初始页面加载时，一切都按预期工作，但是当我从带有轮播的页面导航然后返回到它时，轮播无法正常工作。我认为这是由于轮播再次对其自身进行初始化，所以我相信我需要以某种方式销毁轮播。我可以访问 Swup 中的事件以在交换页面时进行更改，但我不确定如何将其与 Alpine 联系起来。

我可以就如何解决这个特定问题提供帮助，如果有人有任何关于如何使用 Swup 将 Alpine 组件添加到站点的更广泛信息，那就太好了，因为我需要添加一些进一步的组件（例如下拉菜单、模式）在这之后。

下面是我的代码：

HTML

脚本.js

_carousel.js

这是我第一次加载页面时的 HTML，Siema 应用了调整。这工作正常：

这是我导航到另一个页面然后返回轮播页面后的 HTML。这不起作用：

谢谢！