HTML/Javascript 页面转换
HTML/Javascript page transition
我一直在浏览 Awwwards，我看到有自定义页面转换的网站，特别是这个 https://phoenix.cool/ 我一直想知道他们是如何平滑地转换到其他页面的。如果您有任何关于页面转换的资源，我们将不胜感激。谢谢。
处理URL变化
通常你使用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 文章中的解释。
文章底部有 link 个很好的示例，您可以在其中查看示例实现。
编辑： 现成的解决方案：
我今天偶然发现了 barba.js，它似乎正是您要找的东西。检查一下：http://barbajs.org
我一直在浏览 Awwwards，我看到有自定义页面转换的网站，特别是这个 https://phoenix.cool/ 我一直想知道他们是如何平滑地转换到其他页面的。如果您有任何关于页面转换的资源，我们将不胜感激。谢谢。
处理URL变化
通常你使用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 文章中的解释。
文章底部有 link 个很好的示例，您可以在其中查看示例实现。
编辑： 现成的解决方案： 我今天偶然发现了 barba.js，它似乎正是您要找的东西。检查一下：http://barbajs.org