前端动画是网站中十分重要的一环，可以让网站更加生动有趣，给用户带来良好的交互体验。而在前端动画的开发中，使用 npm 包可以让我们更加高效地编写代码。这里介绍一个优秀的 npm 包 - dl-animate 的使用教程。
dl-animate 是什么？
dl-animate 是一个基于 CSS3 和 JavaScript 的动画库，与其它动画库相比，它的特点在于：
- 模块化设计，易于自定义和扩展；
- API 设计简单、易用；
- 支持多种常见的动画效果；
- 无需依赖其它第三方库。
安装 dl-animate
使用 npm 进行安装，打开命令行，输入以下命令即可完成安装：
npm install dl-animate
使用 dl-animate
首先，在 HTML 文件中引入 dl-animate.css 和 dl-animate.js：
<!-- 引入 CSS 文件 --> <link rel="stylesheet" href="/node_modules/dl-animate/dist/dl-animate.css"> <!-- 引入 JavaScript 文件 --> <script src="/node_modules/dl-animate/dist/dl-animate.js"></script>
然后，在需要应用动画的元素上添加类名（具体类名可查看 API 文档），如：
<div class="fade-in"></div>
最后，在 JavaScript 中初始化 dl-animate：
var anim = new DlAnimate();
调用 anim.init() 方法进行初始化：
anim.init();
至此，您已经成功使用了 dl-animate 库。
API 文档
fadeIn/fadeOut/fadeToggle/fadeTo(duration, opacity)- 淡入 / 淡出 / 淡入淡出切换 / 按设置的透明度变化，接受以下参数：duration- 动画执行时间，单位为毫秒；opacity- 需要的透明度值。slideUp/slideDown/slideToggle- 向上滑动 / 向下滑动 / 滑动切换，接受以下参数：duration- 动画执行时间，单位为毫秒。move(anchor, options)- 移动动画，接受以下参数：anchor- 动画元素的定位点，可以是{left: x, top: y}或者指向 DOM 元素的选择器字符串；options- 其它选项，比如duration（动画执行时间）、easing（动画缓动效果）、complete（回调函数）等。rotate- 旋转动画，接受以下参数：angle- 需要旋转的角度，比如'90deg'。scale- 缩放动画，接受以下参数：scale- 需要缩放的比例，比如2。shake- 抖动动画，接受以下参数：direction- 抖动方向，left或right；times- 抖动次数。lightSpeedIn/lightSpeedOut- 从左侧进入 / 退出的动画。flip- 翻转动画，接受以下参数：direction- 翻转方向，x或y。bounceIn/bounceOut- 弹出 / 弹回动画。swing- 摇摆动画。
示例代码
下面是一个简单的 dl-animate 应用实例，它能让一个按钮在点击时出现一个淡入动画：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ----------
----- ---------------- ----------------------------------------------------
------- -----------------------------------------------------------
-------
------- -
------ ------
------- -----
----------------- --------
------ ------
---------- -----
-------------- ----
----------- -------
------------ -----
-
--------
-------
------
------- -------- ---------------------------------
--------
--- ---- - --- ------------
------------
-------------------------------------------------------- ---------- -
----------------- -----
---
---------
-------
-------这个实例只是 dl-animate 可以实现的动画种类中的一小部分，希望您可以通过学习 dl-animate 库自己实现更多的好看、有趣的动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c481e8991b448e8dbd