在前端开发中，我们经常需要根据用户交互行为和业务需求来实现动画效果。而使用一些前端动画库可以极大地简化这一过程。本文将介绍一款优秀的 npm 包 mephisto，它是一款高效、简单又强大的前端动画库。
mephisto 简介
mephisto 是一个轻量实用的动画操作库。它的特点在于使用 CSS3 transition（过渡）和 animation（动画）作为动画引擎，可以非常方便地控制 CSS 属性的过渡或动画效果，支持链式调用，非常易学易用。
安装
你可以使用 npm 安装 mephisto：
npm install mephisto
安装完成后，即可在项目中使用它。
使用方法
实例化
使用 mephisto 之前，你需要实例化一个动画对象。你可以选择直接实例化，也可以使用 mephisto 工厂的 create 方法进行实例化：
var anim = mephisto.create("#element");这里的 #element 支持的是 css 选择器，也就是说你可以选择任何 DOM 元素。更多选择器的使用可以参考 CSS Selector。
支持的方法
mephisto 的动画支持大量的独特方法，这些方法可以自由使用而不必担心各个浏览器的兼容性。
以下是一份针对 mephisto 常用 API 的介绍：
.animate(props, [duration], [ease])
通过 animate 方法可以对一个元素的属性进行平滑的过渡效果。第一个参数是要过渡的 CSS 属性及对应的值，第二个参数是过渡的时间，单位为毫秒。第三个参数是过渡的缓动方式，默认是 linear，你可以传入支持的 CSS 缓动函数名称（例如 ease-in-out）。
示例代码：
anim.animate({ width: 200 }, 1000);.transition(props)
通过 transition 方法可以对一个元素的属性进行过渡效果。第一个参数同样是要过渡的 CSS 属性及对应的值。
示例代码：
anim.transition({ width: 200 });.keyframe(props, [duration], [delay], [count], [ease], [callback])
通过 keyframe 方法可以对一个元素的属性进行动画效果，并支持执行指定次数以及动画结束后的回调。第一个参数同样是要动画的 CSS 属性及对应的值，第二个参数是动画的时间，单位为毫秒，第三个参数是动画的延迟时间，单位为毫秒，第四个参数是动画的执行次数，可以是 infinite（无限循环）或者正整数，第五个参数是动画的缓动方式，默认是 ease-in-out，你可以传入支持的 CSS 缓动函数名称，最后一个参数是动画结束的回调函数。
示例代码：
anim.keyframe({ width: 200, height: 200 }, 1000, 500, 1, "ease-in-out", function() {
console.log("Animation complete!");
});链式调用
上面介绍到的三种方法都支持链式调用，例如：
anim.animate({width: 200}, 1000).transition({height: 100}, 500);暂停、继续、停止
一个正在执行的动画可以通过 pause() 暂停，通过 resume() 继续执行，通过 stop() 停止执行，并立即到达动画的最终状态。
示例
以下代码演示了如何使用 mephisto 实现一个点击按钮弹出提示框的效果。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ----------
-------
---- -
------ ------
------- -----
----------------- -----
-------------- ----
----------- -------
------------ -----
------- --------
-
------ -
--------- ------
---- ----
----- ----
---------- --------------- ------
------ ------
------- ------
----------------- -----
----------- - - --- ------- -- -- ----
-------------- ----
----------- -------
------------ ------
------------ -----
---------- -----
-------- --
----------- -------
-
--------
-------
------
------- ----------------------
---- ------------------- ------------
------- --------------------------------------------------------------------------
--------
--- ---- - --------------------------
-------- ----------- -
----
------------- -------- -- ----------- --------- -- ----
----------- ---------- ---------- -- ---- ---- -- ---------------
-
-------- ----------- -
----
----------- ---------- ------------ ---- -- -- -------------- ---------- -
----------------- -------- -- ----------- -------- -- -----
---
-
-------------------------------------------------------- ---------- -
------------
--------------------- ------
---
---------
-------
-------总结
mephisto 是一款非常实用的前端动画库，而且非常的易学和使用。它支持大量的 CSS 常规属性的过渡和动画，可以大幅度减少开发人员在动画效果上的开发时间和精力。如果你正在寻找一个高效、稳定又强大的动画库，mephisto 绝对会是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040be1