平滑的网页页面过渡是近些年常见的网页效果。网站访问者越来越期望得到用户体验设计师的青睐。对于网站开发公司和SEO专家来说是也是一个挑战。
因此，在本文中，我们将向您展示什么是页面过渡，它是什么以及为什么它与访问者的体验以及您在网络上的成功相关。
什么是页面过渡
页面转换是您网站上从一个网站到另一个网站的转换。例如，如果访问者在您的主页上，请单击指向“关于我们”页面的链接，这会将他们带到您的“关于我们”页面。
为什么页面转换与网站的成功相关
网站上的页面转换通常非常突然。在过去的几年中，这已经引起了批评，即与应用程序相比，网站看起来“过时”并且用户友好度较低。
Sarah Drasner在其有关动画页面过渡的文章中，解释了当访问者查看您的网站并从一页导航到下一页时会发生什么。他们关注您的侧面，并为他们所在的侧面创建心理图。好像您刚从汽车，火车或飞机上下来，正在关注周围的环境并了解您的位置以及您是否在正确的位置。
换面时会出现两种情况。
1.页面更改突然发生
典型的情况是页面过渡突然发生，这是硬跳转。无法同时看到上一页和新页面，并且新页面可能需要一些时间才能完全显示。
根据百度的说法，我们所说的是毫秒到秒，这会影响用户体验，排名和销售。
结果，您的访问者可能会迷失方向，必须为新页面创建一个全新的思维导图。即使是著名的页面元素（例如菜单）也将重新定位在地图上，进行分类，如有疑问，还将重新解释和评估。
这会导致刺激到用户。假设您只是在杭州，下一刻在北京。即使这是您想要的，也必须重新调整自己的方向。
因此，性能和用户体验是齐头并进的，这对于您的网站优化和在网络上的成功至关重要。
2.页面过渡流畅
如果使用页面过渡动画进行过渡，则可以使用该动画确保从A到B的过渡是平滑的。这创造了一种我们从现实生活中了解到并已学到的情况。
正如我们不是突然不在另一个地方一样，我们也不会通过页面过渡动画突然在另一个页面上。相反，新页面在外观上变得更清晰，更大，更详细-而旧页面在完全消失之前变得更小，更不可见。
动画页面过渡可帮助访问者感到舒适。它增强了您的信任和服务质量。页面过渡动画可确保访问者可以更快地找到自己的出路，并找到所需的信息。
平滑页面过渡及其当前分布
即使漂亮的页面过渡的创意没有失败，我们目前仍主要在两个方面遇到软页面过渡。但这不限于此。因此，我们简要介绍了这两个已知领域，然后为您提供了具有很大潜力的第三个实现方案。
移动应用程序和页面过渡
平滑过渡对于移动应用程序来说尤其典型。与网站上的动画页面过渡类似，动画过渡也在那里，以便用户了解应用程序中正在发生的事情。
动画使浏览应用程序更加容易，并向用户显示他们在应用程序中的前进方向。
我们通常通过从显示屏的右侧推入底部来从一侧导航到底部。一个简单的过渡仍然使保持方向非常容易。
SPA和过渡
但是，几年来，在网站上的SPA中也发现了平滑的过渡。SPA（单页应用程序）是一个实施为基于Web的应用程序的网站，仅包含一个HTML文件。新数据或更改后的数据将使用JavaScript动态重新加载。
许多人在使用SPA时并未意识到它是单页应用程序而不是网站。典型示例包括Gmail，Google地图，Netflix，Paypal或GitHub。
如t3n所示，例如，在Gmail中打开新邮件时，不会从服务器加载新的HTML文档。而是在访问者的浏览器中仅更改当前文档的内容，而无需重新加载页面。
SPA的缺点
SPA可以营造出类似APP平滑的感觉，但是SPA通常不适合典型的商业网站。其原因包括：
spa和搜索引擎优化
单页应用程序的搜索引擎优化仍然是SEO专家面临的真正挑战。确实，百度现在可以更好地为SPA编制索引，特别是如果遵循百度发布的技巧。
但是，根据百度网站站长趋势分析师John的说法，对SPA的全部内容进行索引可能需要一些时间。
安全
SPA的安全性较差。跨站点脚本（XSS）使攻击者能够将其他用户的客户端脚本注入Web应用程序。
当通过SPA传输敏感数据时（例如，在支付的情况下），该安全问题变得更加成问题。通常，并非SPA的所有内容都是可见的，因此即使访客没有安全感，也可能会感到安全。
知识
SPA使用JavaScript框架（例如Vue，React，Angular或Backbone）实现。在全球范围内，寻找具有适当技术诀窍的优秀网站开发公司的搜索量巨大。开发人员可以相应地选择他们的工作。
费用
增加成本不仅是资源的稀缺。服务器成本也可能比普通网站托管昂贵得多。
缓慢
对浏览器来说繁重的框架的初始加载可能需要一些时间。一旦收费，SPA当然应该非常快，这通常是与众不同的。但是，JavaScript中的内存问题甚至可能导致功能强大的系统变慢。
插曲
结果，SPA特别被诸如谷歌，滴滴，微信等的大公司使用。在这里，非常高兴的是Gmail之类的应用程序，它们与SEO不相关，或者其内容不应在搜索引擎中找到。
登陆页面较少见。对于普通的商业网站几乎完全没有。
幸运的是，SPA并不是在网络上实现平滑页面转换的唯一方法。
具有和不具有WP的高质量网站的页面过渡
如所承诺的，我们在这里提出了第三个选择，以实现平稳过渡。从技术上讲，这些页面转换的实现对于任何网站都是完全可行的。为此，既不需要移动应用程序，SPA也不需要框架。
对此也需要具备非常非常好的JavaScript知识。但是SPA在SEO，安全性，服务器以及部分成本方面的缺点可以大大降低，甚至完全消除。此外，可以与WordPress之类的CMS结合使用，以保留此类系统带来的优势。
这是您可以为网站创建漂亮的页面过渡的方法
网页之间平滑过渡的挑战是它们不遵循正常的网站逻辑。如果我们单击网站上的链接以转到同一网站上的另一个页面，则通常会发出新的服务器请求，并且页面会完全重新加载。我们没有一种自然，简单的方法来为网站进行平滑的页面转换。
手动平滑的侧面过渡
一方面，软转换可以手动进行100％编码。如果可接受的挑战是长而崎岖不平的路径，那么对于经验丰富的网站开发公司人员而言，这是一条可行且推荐的路径。
毕竟，停止并更改浏览器的本机功能很重要，而这本身并不总是那么容易。本质上，它涉及以下几点：
- 防止浏览器出现正常的链接点击行为
- 控制和自定义跨页面内容的加载和替换
- 通过JavaScript加载内容
- 管理JavaScript及其现有内容的生命周期
- 将URL更改为目标URL，而无需从服务器重新加载新页面
- 预加载：如有必要，请提前加载内容以提高速度（例如，在悬停和单击网站访问者之间）
- 静态页面缓存
- 非常重要：动画设计过渡
该文章提升您的网页转换和页面转换为大家 提供了一个很好的介绍这条道路。
库的平滑页面过渡
除了100％自己编码外，您还可以在库的帮助下创建平滑过渡。更准确地说，是使用现代JavaScript库。
在三种情况下，值得进行平滑的页面转换。
- 您想节省时间，而不必每次都实施和思考上面概述的技术。在这种情况下，值得使用可重用的库。它使您有机会专注于过渡效果本身，而不必过多地关注过渡效果所必需的框架。
- 您不想重新发明，而是想借鉴其他专家的知识和代码。您重视并可以向其学习的导师，以及可以与他们交流思想和澄清问题的社区。
- 您将与其他开发人员一起实现项目。框架和程序应更加统一，因此效率更高。
用于页面转换的库
现在有少数JavaScript库可让您实现软页面转换。这些包括：
Barba.js
Barba仅9kb，是一个小型的JavaScript库，专门为动画页面过渡而开发。他们的目标是帮助您实现网站页面之间的流畅，顺畅的过渡。
自2015年以来，它一直在帮助减少页面之间的延迟，最大程度地减少浏览器的HTTP请求并改善用户的Web体验。
Barba用TypeScript编写。JavaScript和CSS均可用于实际的动画。Barba.js和GSAP的结合对于强动画也很典型。GSAP是一个稳定且高性能的JavaScript动画库，Google以及其他公司也推荐使用。
这样，页面过渡的动画几乎没有限制。
Highway.js
Highway.js由Dogstudio于2018年开发，是一个现代JavaScript过渡管理器。基本上不是作为Barba的替代品，而是作为Dogstudio希望与社区共享的同一问题的解决方案。
JavaScript库基于ES6。为了获得最佳的浏览器兼容性，这些功能还针对ES5进行了翻译，因此，除了Google Chrome，Firefox，Edge和Safari外，还支持最新的Internet Explorer IE11。
凭借其2.5kb的资源，Highway是一种轻量级的产品，代表着易于使用和适应的库。这样做的原因尤其是基础。经验丰富的开发人员可以轻松扩展ES6类，并且可以使用其他功能补充整个库。动画计划使用JavaScript，GSAP和WebGL。
同时，Dogstudio尝试着重于社区经常使用的功能。因此，与Barba相比，它不那么复杂。
开关
Georgy Marchuk为静态网站开发了SWOT 2017，重点是灵活性和可用性。
与Highway和Barba一样，Swup也是一个过渡库，但是其核心基于CSS过渡。带有附加插件的JavaScript可以扩展页面过渡动画。
Swup的使用似乎是一个更容易的切入点，特别是对于不熟悉JavaScript但已经有CSS经验的设计人员而言。
SWUP的另一个功能是可以轻松定义任意数量的容器。这样，即使是网站的最小部分也更容易替换。
smoothState.js
作为第四种可能性，我想提到smoothState。它由MiguelPérez于2014年开发，基于jQuery。jQuery是一个JavaScript库，从本质上带来了很多简化JavaScript操作的方法。不幸的是，重量（kb）也是如此，这就是为什么如今许多人尝试不使用它而仅在必要时才使用jQuery的原因。
尽管如此，smoothState仍然坚持并且仍然很流行。
结论
网络上的页面转换通常非常突然。一键单击一个链接，当前页面消失，新页面尽快出现。这是一个不错的开始，但是如今，您的网站访问者已经习惯了使用移动应用程序获得更好的用户体验。
幸运的是，现在有多种方法可以对页面过渡进行动画处理，从而使其平滑且自然地发生。而且无需创建单个页面应用程序或使用框架。
凭借对JavaScript的高度了解，您可以自己编写100％流畅的页面过渡代码，也可以使用库以及所需的CSS和JavaScript动画。您已经知道了上面的示例。如果您有任何疑问或需要支持，请随时与我们联系 。
令人高兴的是，您甚至可以为与CMS之类的网站（如WordPress、DEDE、mywind、thinphp）结合的网站开发类似本机的页面过渡，从而结合应用程序和典型CMS商业网站的优势。
您的访客可以享受到更好的用户体验，这让人想起自然过渡和现实生活中位置的变化。它为他们提供了方向性，安全性并增加了娱乐性。同时，您的网站获得了质量，您的品牌获得了声誉，并且相应地获得了更高的质量。
