介绍
pfx-transition 是一个基于 CSS3 的动画库，可以给元素添加过渡效果。它包含多种特效，具有多样化的使用方法和细致的配置。在新建弹出层/模态框、点击交互等场景中使用 pfx-transition ，可以有效提高用户体验，同时也能让网站显得更加炫酷。
安装
pfx-transition 可以通过 npm 进行安装：
npm install pfx-transition --save
使用教程
导入
在 HTML 文件中，通过 <link> 标签引入 pfx-transition.css 文件。如果使用的是 webpack、parcel、gulp 等前端构建工具，可以在 JS 文件中通过 import 或 require 导入 pfx-transition.scss 或 pfx-transition.css 文件。
在 JS 文件中，通过 import 或 require 引入 pfx-transition 模块：
import pfxTransition from 'pfx-transition';
或
const pfxTransition = require('pfx-transition');API
pfx-transition 对象提供了以下方法：
pfxTransition(element, effects, options)
给元素添加过渡效果。
element：要添加过渡效果的元素。effects：要使用的过渡效果，可以是单个效果名称字符串，也可以是多个效果名称组成的字符串数组。options：配置参数，可选参数。具体可用参数请参见后文。
-- -------------------- ---- ------- ---------------------- ---------- -- --------- ---------------------- ---------- ----------- -- ------------ ---------------------- --------- - --------- ----- ------ ------- ----- -------------- ------- ---- --- -- ------------------ - ---- --- ------- -----------------
pfxTransition.add(name, effect)
添加自定义过渡效果。
name：自定义效果的名称。effect：自定义效果的 CSS 样式字符串。
pfxTransition.add('rotateIn', 'rotate3d(0, 0, 1, 360deg) scale(0.3)');pfxTransition.remove(name)
移除自定义过渡效果。
name：自定义效果的名称。
pfxTransition.remove('rotateIn');pfxTransition.list()
返回所有可用过渡效果名称的数组。
console.log(pfxTransition.list()); // ["fadeIn", "fadeOut", "zoomIn", "zoomOut", "bounce"]
配置参数
pfxTransition 方法的 options 参数可以配置以下参数：
duration：动画时间，默认值为0.3s。ease：缓动函数，默认值为ease-out。delay：延时时间，默认值为0。count：重复次数，默认值为1。可选值为数字或infinite。direction：运动方向，默认值为normal。可选值为normal、reverse和alternate。fill：填充模式，默认值为forwards。可选值为forwards、backwards、both和none。stagger：分段延迟时间，默认值为0。可选值为数字或数组。如果是数组，数组项可以是数字或字符串（字符串格式同delay）。repeat：是否无限重复，默认值为false。当设置为true时，count参数无效。
示例
以下是一个简单的使用 pfx-transition 的示例。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -----------------
--------------------- ----------
----- ---------------- -------------------------------------------------------------
-------
---- -
-------- -------------
-------- --- -----
---------- -----
------------ --
----------- -------
------- --------
-------------- ----
----------- --- -----
----------------- --------
------ -----
-
---------- -
----------------- --------
-
---- -
------ ------
------- ------
-------------- ----
----------------- --------
-
--------
-------
------
------- --------- -----------------------
------- --------- -----------------------
---- ------------------
------- ------------------------------------------------------------------------
--------
----- ------- - -------------------------------
--------------------------------------------------------- -------- -- -
---------------------- --------- -
--------- -----
------ -------
----- --------------
------- ----
---
---
--------------------------------------------------------- -------- -- -
---------------------- --------- -
--------- -------
---------- ---------
---
---
---------
-------
-------上面的示例展示了如何向元素添加特效，其中一个按钮点击后可以让盒子持续淡入淡出，另一个按钮点击后可以让盒子弹跳。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005516881e8991b448cea0f