人人皆可使用的页面过渡

正如 Sarah 在她之前关于 使用 Vue.js 进行页面过渡的文章 中提到的，设计师和开发人员有大量的动机来构建页面过渡。让我们考虑一下移动应用程序。虽然移动应用程序正在不断发展，但越来越多的注意力被放在动画体验上，而网页基本上保持不变。为什么是这样？

也许是因为原生应用程序开发人员花费更多时间来处理这些动画。也许是因为用户表示这就是他们想要的。也许是因为他们更了解应用程序将运行的环境。所有这些都有助于随着时间的推移改善体验。总的来说，移动应用程序开发人员似乎更了解或更关心用户体验。

如果我们看看当今移动应用程序的设计方式，通常在状态之间会有一些动画过渡。即使是现成的原生组件在状态之间也具有一些简单的动画。开发人员和设计师意识到，这种小动画可以帮助用户理解应用程序中发生了什么。它使应用程序的导航更容易，并告诉用户他们在应用程序中将要前往的位置。

例如，当您导航到子类别时，它通常会从屏幕右侧滑入，我们都以某种方式知道这意味着什么。

动画很重要。它可以用来改善用户体验。

在开发网站时，很容易花费数小时来确保用户通过一流的过渡（例如画廊图片之间的移动或花哨的悬停效果）看到整个故事……但一旦用户点击链接，所有这些体验都会崩溃，您将从头开始。这是因为页面重新加载，并且在这种情况下我们没有简单/明显/原生的方法来处理动画/过渡。

在网络上，大多数用于改善体验的努力都集中在网站的结构、视觉设计甚至性能上。您可以在这里和那里滑动一些元素，但仅此而已。这是网络只是用于浏览一堆文本页面（后来升级了一些滑动文本）的时代的乏味残余。

是的，我们确实曾经这样做过。

有一些非常花哨的网站，背景中充满了动画或令人难以置信的 WebGL 象形文字。不幸的是，它们通常难以导航，并且您的笔记本电脑电池在大约 15 分钟内就会耗尽。但它们当然看起来很不错。这些网站充满了动画，但其中大部分是为了给您留下深刻印象，而不是帮助您四处导航，或者使体验更快，或者让您更容易浏览网站。

问题的根源

所有这些都提出了一个重要的问题。我们拥有所有可以执行此页面过渡操作的技术。为什么我们不做呢？是因为我们不想做吗？是因为我们认为这不是我们工作的一部分吗？这是否很难，以至于我们不得不为项目收取双倍费用，而客户又不买账？

让我们看看另一个可能的原因。通常，公司会选择对其所有项目通用的技术。作为前端开发人员，您对服务器上实现的内容没有太多控制权，因此您可能无法依靠某些 JSX 的服务器端渲染。

也许您必须选择一些稳定且通常可用于任何类型的解决方案的东西（这通常意味着代码库越少，灵活性越高），因此您被迫避免在开发堆栈中使用某些框架。不幸的是，这是有道理的。您不希望仅因为您决定某个框架是此特定项目的良好基础，就在 10 个不同的框架中实现联系表单。而且不要让我开始讨论安全性，安全性多年来一直在改进。您不能仅仅因为您希望用户在浏览您的网站时获得更多乐趣而将其抛弃。

还有另一个可能的原因。也许您想在 WordPress 上构建，因为您想利用多年来人们为您准备的所有开源好东西。您会用所有这些“免费”功能换取更好的体验吗？可能不会……

目标

除了像去除所有图像和视频这样极端且不切实际的更改之外，我们网站从服务器加载的时间就是它本身。我们有一个服务器渲染的页面，除了更快的服务器或更好的缓存之外，没有太多可以做的事情来改善这一点。

因此，提高加载时间的方法是稍微作弊！通过让用户认为加载时间更短来作弊，因为他们会被屏幕上发生的事情分散注意力。通过提前加载内容并设置动画过渡来作弊。

让我们介绍一些可用于执行过渡的效果。即使是简单的淡入/淡出也能让您获得完全不同的感觉，尤其是在某些元素指示加载的情况下。让我们看一些示例。

注意：以下所有示例都是基于 PHP 构建的网站，并且与任何其他网站一样，几乎可以在没有 JavaScript 的情况下工作。

简单的淡出/淡入无缝地改善了用户在点击链接之前的体验，并且不像正常的浏览器重新加载那样令人不安。菜单图标上的加载指示确保用户在页面加载时间稍长时不会恐慌。

通过以不同的方式为不同的元素设置动画可以实现一些有趣的动画，这也可以与淡入淡出相结合。

或者如何用其他元素覆盖页面？

这几个小时的工作使网站焕然一新，将您的静态页面变成了动画页面。而且无需任何额外的准备。

但是，如果您在设计阶段已经了解您的意图，则可以根据您的需要调整设计。常见的元素可以提前准备。

以气泡形式引入的主要导航元素在加载下一页内容时与用户互动。其影响是用户不会感到无聊，并且知道正在发生某些事情。由于动画在点击链接时开始，因此用户甚至没有意识到他们一直在等待某些东西。

解决方案

我们已经确定了我们实际上想做什么，以及为什么我们想这样做……让我们看看我们如何才能实现这一点。

虽然后端没有太多可以做的，但您可以在浏览器端做很多事情。一个很好的例子是 Turbolinks，由 Basecamp 人员开发，它采用您的网站并使其更像应用程序，方法是使用 JavaScript 启用内容加载。它只是避免了难看的浏览器页面到页面重新加载跳转。Turbolinks 处理浏览器历史记录、加载以及所有其他通常发生在浏览器后台的事情。这里的关键是控制加载和替换内容，因为只要浏览器不重新加载，屏幕上发生的一切都在我们的控制之下。

让我们思考一些可以用来改善我们体验的概念。加载时间是我们最大的敌人，那么我们如何在浏览器中改善它呢？

预加载

在大多数情况下，加载下一页的请求不必仅在用户点击链接时才开始。还有另一个事件正在发生，可以指示用户打算访问该页面，那就是将鼠标悬停在链接上。链接悬停和点击之间始终有几百毫秒的时间，为什么不利用这段时间来发挥我们的优势呢？哎呀，如果您的大多数用户最终都到达了您已知的下一页，并且您有统计数据可以证明这一点，那么为什么不在初始渲染后的任何时间预加载它，而用户正在尝试浏览当前页面时呢？

下图说明了多少事情可以并行发生并节省我们一些宝贵的时间，而不是一个接一个地完成。在人们为自己制作的页面过渡的自定义解决方案中，一个非常常见的错误是请求的开始，这通常是在页面卸载/隐藏后触发的。

缓存

虽然这对一些动态网站来说可能是个问题，但静态网站是缓存的完美候选者。既然您可以控制内容的加载和替换，为什么还要加载两次页面呢？您可以保存内容，并在用户访问同一页面或使用浏览器后退按钮返回时使用它。

或者，您可以使用缓存来预加载悬停时的页面，并定期清空缓存（也许在每次页面访问后？），以便在动态网站上始终拥有页面的最新版本，同时仍然启用预加载功能。

有趣的是，渐进式 Web 应用也“投资”于这个领域，尽管方法略有不同。

动画

所有这些概念都很棒，但我们仍然需要将动画引入其中。

页面加载和替换的控制权可以由我们掌握，因此我们可以随时处理页面内容。例如，在页面加载时向其添加一个类非常简单。这使我们能够为页面定义另一个状态，或者换句话说，隐藏/卸载它。当动画完成并且页面加载完毕后，我们可以自由替换内容并删除状态类以让页面再次动画显示。

另一种选择是使用 JavaScript 使页面“淡出”，替换内容，然后使其“淡入”。

有很多方法可以解决这个问题，但无论如何，这里的关键功能都是不让浏览器重新加载。

准备就绪

这三个主要概念将产生很大的影响。重点是，只需付出一点额外的努力，自己动手做这件事并不难，我鼓励您这样做。

这将是一条崎岖的道路，可能会有很多麻烦，因为不破坏浏览器原生功能并不总是那么容易。

但是，如果您更喜欢“加载并运行”类型的人，我编写了一个名为 swup 的小软件包，它解决了 Turbolinks 所做的一切，以及我们在这里介绍的所有三个概念。 这是一个小演示。

swup 的优势是什么？

• 它完全在前端运行，因此不需要服务器设置。尽管您可以根据请求标头中的 X-Requested-With 轻松实现仅传输所需数据的操作（根据您的特定解决方案，需要对 swup 进行少量修改）。
• 使用浏览器历史记录 API 来确保网站的正确功能，就像在没有 swup 的情况下一样（后退/前进按钮和 URL 地址栏中的正确路由）。
• 它不必是初始加载批处理的一部分，可以在初始渲染后加载并启用。
• 处理时机，这意味着它会自动检测 CSS 中定义的过渡结束，同时处理加载下一页。整个过程基于 Promise，因此不会浪费一毫秒。
• 如果在选项中启用，swup 可以在悬停链接或在加载内容中遇到链接时（带有 data-swup-preload 属性）预加载页面。
• 如果在选项中启用，swup 还会缓存页面的内容，并且不会重复加载同一页面。
• Swup 发出大量事件，您可以在代码中使用这些事件来启用您的 JavaScript、分析等。
• 您可以定义任意数量要替换的元素，只要它们对所有页面都是通用的即可。这使得能够在页面上为通用元素设置动画，同时仍然替换其部分内容成为可能。我们上面早期示例中的气泡菜单使用了此功能，其中气泡上的勾选标记取自加载的页面，但其余气泡保留在页面上，因此可以对其设置动画。
• 使您能够为不同页面之间的过渡使用不同的动画。

对于那些喜欢使用 JavaScript 完成动画的人，还有一个名为 swupjs 的版本。虽然在 JavaScript 中实现动画可能更难，但它绝对可以让您更好地控制。

结论

动画和无缝体验不应严格限于原生应用程序或最新技术。只需付出一点努力、时间和少量代码，即使您的 WordPress 网站也能获得类似原生的体验。虽然我们已经喜欢网络的现状，但我认为我们始终可以尝试使其变得更好。