开发人员如何在他们的网站上添加“平稳过渡”?

时间:2019-10-11 作者:Mister SirCode

Question:
我注意到一些网站(例如Microsoft Team,或Microsoft 365)具有这种“平滑HTML转换”效果,在打开链接时会使网站内容保持加载状态,而只更新内部内容。

ETC:<我想问的是,有人知道这种效果是如何产生的吗?如果有,有人知道自己是如何产生这种效果的吗?例如,我的网站有一个顶部导航栏,除调试面板外,它显示在我的每一个页面上,但这不是我关心的页面,因此我想看到的是我的顶部导航栏和页面背景保持加载状态,而是<body> 更新。

Requirements:
这里没有太多内容,我只是希望在打开指向类似于主索引的页面的链接时,能够保持HTML不被卸载和重新加载的效果。我的网站以html为核心,这样只有内部内容更新。

Bonus:
我还注意到,像我上面提到的那些网站,可以“某种程度上脱机运行”,并且似乎将其文件缓存到计算机中,就像我在没有wifi的学校笔记本电脑上访问microsoft 365一样,我打开网站并加载,但它只显示“抱歉,没有连接”

Edit: I found out its related to AJAX, sadly Im using Github Pages, so if theres a solution for that with Jekyll or another static library/tool, id appreciate it

1 个回复
最合适的回答,由SO网友:NewJenk 整理而成

您所指的通常是ajax和pushState的组合。这是一个漂亮的效果,可以为最终用户体验增加价值。

我在几年前建立的WordPress网站上部署了它(take a look here).

我使用了一个名为Smoothstate 它有相当好的文档(至少能够启动并运行基本的文档)。

你可以看到an answer I posted a few years ago about Smoothstate, 这解释了如何设置JQuery,以便在页面转换完成时激发它。

相关推荐

如何向WordPress添加自定义html和css

例如,如果我想从此网站添加此代码https://codepen.io/tamak/pen/ApLcqhtml教程已设置动画cssdiv{宽度:120px;高度:100px;显示:块;背景:绿色;文本对齐:居中;线宽:100px;边距:10px;浮动:左;颜色:白色;边框半径:10px;}。动画{动画持续时间:3s;动画填充模式:两者;动画迭代计数:无限;}js$(文档)。就绪(函数(){动画单击(“.卷展栏1”,“卷展栏”);动画单击(“.bounce1”,“bounce”);动画单击(“.flash1”