我一直在浏览 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 上找到简洁的示例(例如 https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/ )。
您必须将动画附加到 window.onpopstate
事件。同一篇 MDN 文章中的解释。
文章底部有指向良好示例的链接,您可以在其中查看示例实现。
编辑: 现成的解决方案: 我今天偶然发现了 barba.js,它似乎正是你要找的东西。查看:http://barbajs.org
关于javascript - HTML/Javascript 页面转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47579136/