在进行 Web 开发时，我们经常需要使用到各种 JavaScript 动画效果来提升用户体验。而在实现平滑过渡动画时，使用 smooth.js 就可以大显身手。本文将介绍如何安装并使用这个 npm 包，以及常见的应用场景。
安装 smooth.js
安装 smooth.js 非常简单，只需在命令行界面中键入下面的命令即可：
npm install smooth
当然，还有其他一些选项，例如使用 --save 将包添加到项目的 package.json 文件中，或者加上 --global 参数使它成为全局安装的包。但是在本文中，我们假设您只需安装适用于特定项目的本地包。
使用 smooth.js
安装完毕后，我们需要将 smooth.js 引入到 HTML 页面中：
<script src="path/to/smooth.min.js"></script>
在使用 smooth.js 之前需要拥有一个示例元素，它可以是一个带有 run-smooth 类名的 <div> 或 <section> 标签。
引入 JavaScript 后，为元素设置 data-duration 和 data-easing 属性，它们分别用于设置动画持续时间和缓动函数。这里有一个常用的例子，使用了 easeOutCubic 缓动函数：
<div class="run-smooth" data-duration="1000" data-easing="easeOutCubic"></div>
最后，我们需要在 JavaScript 中调用 smooth() 函数，以启动平滑过渡动画：
smooth();
这里是完整的使用示例：
-- -------------------- ---- -------
--------- -----
------
------
------- -------------------------------------
-------
----------- -
----------------- --------
------- -----
------ -----
-------------- ----
------- -----
-
--------
-------
------
---- ------------------ -------------------- ---------------------------------
--------
---------
---------
-------
-------常见应用场景
页面滚动动画
在单页面应用程序中，让页面平滑地滚动到指定的元素位置非常常见并且实用。使用 smooth.js，只需配合定位属性即可实现此功能。
-- -------------------- ---- -------
--------- -----
------
------
------- -------------------------------------
-------
----- -
------- -------
-
------- -
--------- ---------
---- -------
-
--------
-------
------
------- -------------------------------------------
---- -------------------
---- ------------- ----------- -------------------- ---------------------------------
--------
-------- ---------------- -
----- ------ - ----------------------------------
----------------------- --------- -------- ---
-
---------
-------
-------菜单栏静态滑动效果
我们经常会看到侧边栏或底部菜单栏在页面滚动时静止浮动并保持固定位置，但在鼠标上下滚动时具有平滑的动画效果。
如果使用传统的吸附效果，将会发现效果非常差。但使用 smooth.js，可以让图片或菜单栏在页面滚动时平滑滑动。下面是一个适用于移动设备底部菜单栏的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------- -------------------------------------
-------
----- -
--------- ------
------- --
------ -----
------- -----
----------------- --------
-------- -----
------------ -------
---------------- -------------
-
---- -
------- -----
----------------- ------------
------- --------
------ -----
------- -----
-
---- --- -
------ -----
------- -----
-
------------ -
---------- ------------ ------
-
--------
-------
------
---- ------------------ ------------------- ---------------------------------
---- -------------
------- ---------------- --------------------------------
------- ---------------- ----------------------------------
------- ---------------- -----------------------------------
------- ---------------- --------------------------------
------
--------
----- ---- - --------------------------------
--- ------------- - -----
--------------------------------- -- -- -
-- --------------- - ---- -
-- --------------- -
-----------------------------
------------- - ------
-
- ---- -
-- ---------------- -
--------------------------------
------------- - -----
-
-
---
---------
---------
-------
-------总结
本文介绍了如何在您的 Web 应用程序中使用 smooth.js，以实现各种平滑过渡动画，以及它的常见应用场景。希望这份文档能够帮助您轻松创建您心仪的动画效果！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d0927023822640