问题标签 [page-transition]

我现在有2页。我正在做的是，我正在尝试页面转换，我正在使用下面的插件swup。现在我的问题是当我点击菜单时页面转换不起作用。

我在 href 中 添加了类似/index和的菜单，我的 URL 是，当我点击菜单时，我得到并且 URL 正在显示/abouthttp://localhost:8080/example/indexobject not foundhttp://localhost:8080/about

谁能帮我解决这个问题？

头文件.php

索引.php

关于.php

样式.css

main.js

有没有办法延迟盖茨比的路线变更？在淡入新页面之前，我会使用它来淡出页面。我正在使用 gatsby-browser api 执行此操作。淡入新页面效果很好，但淡出旧页面不起作用。

I'm completely stuck with it. I want to create a custom page route that will animate both the IN and the OUT pages. The animation of the routes themselves is a simple task, I'm doing it like this:

But the problem is that I also want to run some animations inside those pages, not only animating the page widgets themselves. And I have no idea of how can I do that.

I'm using the route like this

My first idea was to launch an animation controller in the OUT page before pushing the route like this:

And it worked. The page animation ran along with the page transition. But I couldn't manage to reverse the controller when I needed to pop the route. I mean, I could, of course, e.g. in a didWidgetUpdate method, but it had no effect because the widget (which is called nextPage in this example) lost its context and the animations controller animated another copy of the widget that was not displayed until the pop transition ended. While the pop transition ran it displayed an old copy of the "nextPage"

The second idea was to use a GlobalKey to keep state of the widget which had also failed with an error of using 2 duplicate global keys.

The ideal option would be something like this in my FromMenuRoute

So I've run out of good ideas. I wouldn't like to make it in some very tricky way. Maybe there's some better solution I don't know about. Please, share it, if you know how to solve this

Here's the detailed example of what I want to achieve

I need to start moving a blue square when the page transition starts and revert the animation of that square on the route pop

我正在使用CSSTransition它，它与组件配合得非常好：

我想知道当我通过以下CSSTransition方式打开/关闭页面时是否可以使用一个很好的过渡Route：

我试过了，没有成功。不能这样使用CSSTransition吗？您还有其他类似的解决方案吗？

我想在 HTML 中创建一个页面转换，通过单击图像/文本可以看到这种星球大战超跳转动画。这意味着当我单击图像/文本时，页面会朝该图像/文本缩放，并且该图像/文本会变成单独的页面。有谁知道这是否可能以及如何做到这一点？我相信我记得很久以前在一个网站上看到过它，但不幸的是我不记得在哪里。

我描述的动画类似于这个 gif https://giphy.com/gifs/bigblueboo-space-scifi-hyperspace-5xtDarHj0ORdxfWtV6g。

谢谢你。

我有一个与 css 一起使用的分页过渡动画。它依赖于更改容器的类来启动 CSS 动画。我正在寻找一种方法来激活这个动画（通过将类添加到容器中）然后等待它完成，然后转到 href 的链接。这是 JSFiddle。

有没有办法做到这一点？

您好，我正在尝试使用这个很棒的插件“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。

我第一次尝试使用 Barba.js。我基本上只希望每个页面都有一个转换（转换 div 显示data.next.namespace幻灯片进出）。唯一的例外是在第一页加载时仅出现一次的预加载屏幕。

once钩子有效，但我在过渡default时遇到问题。当我单击一个链接时，DevTools 中的控制台没有显示错误，但加载的页面始终是当前页面。我使用 global barba.hooks.enterto console.log nextdata.next.namespace并且它工作了几分之一秒，然后立即重新加载当前页面。（下面的代码）

我不知道我的代码有什么问题，非常感谢您的宝贵帮助。

提前致谢！