javascript - HTML/Javascript 页面转换

标签 javascript html ajax web 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 上找到简洁的示例(例如 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/

相关文章:

javascript - Node.js 不同函数之间的全局变量

javascript - Vue CLI 3,我的图像资源返回 404 错误?

php - 从 mysql 数据库删除行时出错

javascript - Ajax 将内容类型为 Multipart 的文件上传到 GoLang 服务器

javascript - 点击链接后页面跳转 - jQuery AJAX 调用

javascript - 如何通过原型(prototype) Ajax.Request() 传递 HTTP AUTH 值?

javascript - 在多行文本中使用正则表达式阻止逗号

javascript - 如何在 Zeppelin 上通过 JavaScript 设置 Angular 变量值

html - 使 div 扩展到表格大小

javascript - 如何延迟 javascript 函数的执行直到 JSON 加载完成