问题标签 [swup]

我正在尝试在流星 js 框架中使用 swup。我在 main.html 中添加了包含 swup 的 unpkg 链接的脚本标签，并在 main.js 的 Meteor.startup 函数中初始化了 Swup。但是当我运行该应用程序时，它会抛出“无法设置属性'responseURL' of null”错误。

在 main.html 中：

并将 swup id 添加到 layout.html 中，这就像所有路由发生的容器。

我最近才开始在 Meteor 上工作，所以我有点困惑。如果有人可以帮助我初始化和设置 swup，我会很高兴。提前致谢。

使用 Swup JS，我实现了一个很好的过渡效果，除了一个问题外效果很好。

如果我向下滚动到页面“A”上的某个点，点击 url 转换到页面“B”，我不会转换到页面“B”的最顶部，而是滚动点相同或接近。

如何让 swup js 不记得滚动位置并将我转换到页面顶部？

这是我第一次使用带有 js 插件的 swup js。https://swup.js.org/plugins/js-plugin

我可以看到转到单击页面的触发器位于选项对象数组中。

我的问题是无论如何我可以从外部函数触发“下一个”

如何从不在 Const 选项中的另一个外部函数触发“下一个”？

例如

这不起作用

谢谢

我正在使用 Swup 库来实现页面转换，效果很好，但我需要使用 2 个插件（脚本和正文类）。我一定错过了一些东西，因为我不能让两者都工作，只有最后一个被调用的工作。有没有办法让 Swup 拥有超过 1 个插件？

我正在使用 swup 进行页面转换，但我的特定网站没有任何反应。我让它在一个简单的两页 HTML 示例网站上工作，但对我的投资组合做完全相同的事情是行不通的。几天来我一直在努力解决这个问题，但我越来越绝望。

我试过的

1. 使用来自 unpkg 的脚本链接。
2. 创建一个完整的启动文档以在我的网站上安装 Node。
3. 将单个 const 变量放在单独的文档和 HTML 文件本身中。
4. 仅将 'main id="swup" class="transition-fade' 标签放在我希望它指向的网站的一部分上。
5. 检查以确保我的 CSS 类没有拼写错误。
6. 将文件源更改为以 ./或/或无开头。

我需要的

我想从我的网站的投资组合部分进行页面转换，以淡入到下一页。

相关代码

我的下一页也有所有这些标签和脚本。

谢谢！

您好，我正在尝试使用这个很棒的插件“Swup JS”。当我从他们的网站运行代码时，插件运行完美。

当我尝试将它添加到我的网站时，它停留在“pageLoaded”状态。

我试图删除所有代码并分别粘贴每个部分，但错误不断发生。基本上 URL 正在改变并且动画正在工作（直到淡出部分），但新内容永远不会加载。调试器插件显示它直到这部分“pageLoaded”没有任何错误。

有没有人使用过这个插件或发现这个错误？

我无法使用 Swup.js 在两个页面之间转换英雄视频。

目前，我可以使用名为“transition-wipe”的自定义类转换视频元素，该类在页面更改时将视频的宽度从 50% 更改为 100%，效果很好，但是在加载下一页时视频会重新启动。

有没有办法在转换时暂停视频并从上一个停止的地方播放下一个视频？我的目的是让视频在页面之间呈现动态，并在不重新启动的情况下连续播放。我似乎找不到任何解决方案，所以任何建议都将不胜感激！:)

嗨，我遇到了 HeadPlugin 如何影响动画的问题，并确定了一个解决方法，并认为我会在这里发布它，以防万一有人遇到同样的问题。此外，所有这些都可能被误导，我可能会遗漏一些东西，所以请告诉我。

场景：

假设我们想为网站上的不同页面使用不同的样式表，那么我们可以使用 HeadPlugin 来做到这一点。

问题：

更改样式表时，淡出动画将起作用，但淡入动画将不起作用。（注意：如果样式表中的元素在淡入动画之间转换的两个页面中具有相同的名称，则有时会起作用，具体取决于元素和动画。）

一个解法：

创建一个单独的样式表，定义所有页面之间的所有动画并将其包含在每个 html 页面中。然后为各个页面的其余样式或您认为合适的样式创建一个单独的样式表。这样，您仍然可以在页面之间以不同的方式对共享相同 ids/classes 的其余元素进行样式设置。（缺点：包含所有动画的样式表的初始加载时间，但是这个文件应该是延迟加载的：D）

另一个解决方案（我不喜欢）：

有一个大样式表，其中包含每个页面中所有元素的样式（当然不包括内联 CSS）。（缺点1：包含所有动画和其他样式的样式表的初始加载时间，此文件不应延迟加载，除非您将动画 CSS 和非动画 CSS 拆分为单独的文件。在这种情况下，只是您的样式的初始加载时间文件，除非所有关键样式都内联完成，在这种情况下，您可以延迟加载这两个文件 XD。）（缺点2：除非使用内联 CSS 来定义差异，否则不能在不同页面上共享相同的 ids/classes 的元素。）

潜在的解决方案？（没试过）：

使用内联 CSS 来定义动画 O_O，idk 如果这甚至可能但可能不是一个好主意。

如果有人需要，我可以发布一些示例来演示问题等。

如果有更好的方法，请告诉我，否则希望这有助于 OwO。

我正在尝试将Swup.js实施到 Oxygen 中的 Wordpress 站点中。出于某种原因，当我使用 Swup 时，没有加载正确版本的站点。

出于某种原因，单击链接时未加载正确版本的站点。它似乎加载了网站的响应版本。以下是该页面的链接：https ://testswup.kastanjeskolan.nu/ 如果您访问我们的服务，您将获得该页面的一个版本。但是如果你更新/重新加载，你会得到正确的版本。这是一个视频来说明我的意思。

有谁知道为什么会这样？

谢谢你的帮助。

我正在尝试从 main-swup 更改动画。例如，当我单击第一个按钮时，页面之间的动画应该从左到右变化，当我单击另一个按钮时，它应该以另一种方式动画。

在 index.html 中：

在 main.js 中：

样式.css

有什么方法可以从#swup 更改课程？或者有没有其他方法可以改变动画？