【发布时间】：2018-05-14 17:13:21
【问题描述】：
我一直在浏览 Awwwards，我看到有一个自定义页面转换的网站，特别是这个 https://phoenix.cool/，我一直想知道他们如何平滑地转换到其他页面。如果您有任何关于页面转换的来源，我们将不胜感激。谢谢。
【问题讨论】：
-
您也可以使用barba.js.org实现这些转换
标签： javascript html ajax web transition
【发布时间】：2018-05-14 17:13:21
【问题描述】：
处理网址更改
通常你使用browser's history api，这意味着你并没有真正导航到另一个页面，只是在浏览器中更新url，f.e：
history.pushState({ foo: "bar" }, "Next page", "secondPage.html");
这可以提供看似毫无意义的体验。请注意，提供 secondPage.html 不会加载任何 html。除了 url 更改之外的所有内容都必须由开发人员手动处理。
动画本身
由于您必须手动处理它，因此您可以随心所欲地制作它。您可以在 codrops (f.e. https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/) 上找到简洁的示例。
您必须将动画附加到window.onpopstate 事件。同一篇 MDN 文章中的解释。
文章底部有很好的示例链接，您可以在其中查看示例实现。
编辑： 现成的解决方案： 我今天偶然发现了 barba.js，它似乎正是你想要的。看看吧：http://barbajs.org
【讨论】：
-
谢谢你，真的给了我一些见解。另一个问题，如何处理html中的变化？我需要使用 ajax 吗？
-
嗯，这完全取决于你想做什么。如果你有两页；例如，“显示”和“隐藏”，然后在 popstate 事件中，您需要根据当前状态是否显示或隐藏来应用视觉更改。查看演示 html5doctor.com/demos/history 和 html5doctor 上的文章本身。解释得还不错。但是给你一个答案：你不需要使用ajax，但这是你通常做的来获取新数据。其他策略（绝对不推荐）是演示中的一种：加载所有内容并切换内容。