如何使用JavaScript创建平滑的页面过渡

在我们开始之前，值得注意的是本教程不适合初学者。我们将使用一些较新的 ES6 javascript 语法，并且我们将使用命令行将 ES6 编译为 ES5，因此，如果您对 JavaScript 还不太熟悉，那么本教程可能不适合您。

创建 javaScript 平滑过渡

如何使用 JavaScript 创建平滑的页面过渡

什么是平滑页面转换？

当从一个网页导航到另一个网页时，浏览器将使用超链接来确定要打开哪个文件。该过程涉及一个页面关闭和另一个加载，这通常是一种有点不和谐的体验（尽管我们都非常习惯）。

可以做得更顺畅！有许多技术可以让我们加载新页面、过渡到新页面并同时更新浏览器中的 URL。在本教程中，我们使用一个 JavaScript 页面转换库 Highway.js 来淡出我们的网页，然后淡入新页面。

我们在本教程中介绍的内容

• JavaScript 演示概述

• 安装 node.js

• 使用 npm（节点包管理器）

• 项目文件的演练，并添加 package.json

• 添加 GSAP和 Highway.js包（分别用于动画和过渡）

• 介绍 Parcel（它将即时编译我们的 Sass 文件）

• 使用 Highway（以及data-router-wrapperanddata-wrapper-view标记）

• 编码转换

• 优化动画

• 将类添加到活动菜单项

资源

• 节点.js

• 包裹

• 高速公路.js

• GSAP

• 混合套件