简介
@fleury/animation 是一个可以在前端实现动画效果的 npm 包。它提供了一些基础的动画效果以及一些高级的动画效果，通过使用该 npm 包，我们可以更加方便、高效地实现各种各样的动画效果。
安装
你可以通过 npm 来安装 @fleury/animation，安装的命令如下：
npm install --save @fleury/animation
使用
在使用 @fleury/animation 前，我们需要先将它引入到我们的项目中，代码如下：
import "@fleury/animation";
基础动画
我们可以通过 @fleury/animation 提供的 domAnimate 方法来实现基础的动画效果。domAnimate 方法可以接收两个参数，第一个参数是需要执行动画的 DOM 元素，第二个参数是动画的选项配置。
选项配置包括以下几个参数：
- duration：动画执行的时长，单位毫秒。
- delay：动画执行的延迟时间，单位毫秒。
- easing：动画执行的缓动函数，可以是 cubic-bezier、ease、ease-in、ease-out、ease-in-out 等函数。
- from：动画开始时的样式属性。
- to：动画结束时的样式属性。
例如，在下面的例子中，我们实现了一个 div 元素的底部向上移动的动画效果：
-- -------------------- ---- -------
----- ------- - -------------------------------
----- ------- - -
--------- -----
------ ----
------- --------------
----- -
------- ---------
--
--- -
------- ------
--
--
----------------------------高级动画
@fleury/animation 提供了一些高级的动画效果，例如支持多个元素同时执行动画，并且支持链式调用和取消动画等操作。
同时执行多个元素的动画
我们可以通过 transit 方法来实现同时对多个元素执行动画，transit 方法可以接收两个参数，第一个参数是配置文件，描述了所有需要执行动画的元素及其对应的动画样式，第二个参数是动画的选项配置。
配置文件包括以下几个参数：
- element：需要执行动画的元素。
- from：动画开始时的样式属性。
- to：动画结束时的样式属性。
例如，在下面的例子中，我们实现了移动三个 div 元素的动画效果：
-- -------------------- ---- -------
----- -------- - ----------------------------------
----- ------ - -
-
-------- ------------
----- -
----- --
--
--- -
----- ----
--
--
-
-------- ------------
----- -
----- --
--
--- -
----- -----
--
--
-
-------- ------------
----- -
---- --
--
--- -
---- ----
--
--
--
----- ------- - -
--------- -----
------ ----
------- --------------
--
------------------------- ---------链式调用
我们可以通过 on 方法来实现链式调用，在 on 方法中，我们可以设置动画结束后需要执行的回调函数。
例如，在下面的例子中，我们实现了移动一个 div 元素的动画效果，动画结束后执行了一个回调函数：
-- -------------------- ---- -------
----- ------- - -------------------------------
----- ------- - -
--------- -----
------ ----
------- --------------
----- -
----- --
--
--- -
----- ----
--
--
---------------------------
------------------- -- -- -
---------------------- ------
---取消动画
我们可以通过 cancel 方法来取消动画。
例如，在下面的例子中，我们实现了移动一个 div 元素的动画效果，在动画未执行完毕时，点击该元素时，触发了动画的取消操作：
-- -------------------- ---- -------
----- ------- - -------------------------------
----- ------- - -
--------- -----
------ ----
------- --------------
----- -
----- --
--
--- -
----- ----
--
--
----- --------- - ---------------------------
--------------------------------- -- -- -
-------------------
--总结
通过本篇文章，我们学习了如何使用 @fleury/animation 包来实现各种前端动画效果。我们介绍了基础动画和高级动画的使用方法，并且详细介绍了高级动画中的同时执行多个元素的动画、链式调用和取消动画等操作。在实际开发中，我们可以根据需要选择相应的动画效果，大大提高了我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7d238a385564ab6a65