在前端开发中，动画效果经常被用来增强用户体验。AniJS 是一个基于 CSS 的动画库，它提供了一种简单易用的方法来添加动画效果。本文将介绍如何使用 npm 包 AniJS 来创建动画效果，并提供详细的示例代码和学习指导。
安装 AniJS
要使用 AniJS，首先需要安装它。可以使用 npm 命令行工具来安装 AniJS：
npm install anijs --save
这将安装 AniJS 并将其添加到项目的依赖项中。
创建动画效果
使用 AniJS 来创建动画效果非常简单。只需在 HTML 元素上添加 data-anijs 属性并设置相应的值即可。
例如，在以下 HTML 代码段中，我们将为 .box 元素添加一个简单的淡入效果：
<div class="box" data-anijs="if: load, on: window, do: fadeIn, before: scrollReveal"></div>
上述代码中，data-anijs 属性的值包含了多个参数。if 参数定义了触发条件；on 参数定义了触发事件；do 参数定义了执行的动画效果；before 参数定义了在元素出现之前执行的动画效果。
在以上代码中，我们设置了 if:load，这意味着动画将在页面加载时触发。on:window 设置了事件将在窗口上触发。do:fadeIn 定义了一个淡入效果，before:scrollReveal 定义了另一个效果，它将在元素出现之前执行。
自定义动画效果
除了使用 AniJS 提供的预定义动画效果之外，还可以自定义动画效果。要创建自定义动画效果，需要添加相应的 CSS 类和 JavaScript 代码。
以下是一个简单的示例，它演示了如何创建一个旋转效果：
<div class="box spin" data-anijs="if: load, on: window, do: spinIn"></div>
-- -------------------- ---- -------
----- -
----------- --------- -- ------------
-
-------- -
---------- -------------
-
------------- -
---------- ----------------
--- -------------------- ---- -------
-------------------------
--------- -
----------- --------
----------- -----
-------- -------- -------- ----------------- -
---------------------------
-----------------------------------
--
-------- ------
--
---------- -
----------- --------
----------- -----
-------- -------- -------- ----------------- -
--------------------------------
------------------------------
--
-------- -------
-
---在以上示例中，我们创建了一个名为 spinIn 的自定义动画效果。首先，在 CSS 中创建了一个名为 spin 的类，它将应用于要添加旋转效果的元素上。通过添加 transition 属性来定义过渡效果。然后，我们定义了两个额外的类：in 和 in-back。这些类将在 JavaScript 代码中使用。
接下来，我们定义了一个名为 spinIn 的 JavaScript 动画，并将其注册到 AniJS 中。该动画将应用于所有具有 .spin 类的元素。它将在页面加载时触发，并且将持续一秒钟。在 funct 函数中，我们将 in 类添加到目标元素并将 in-back 类从目标元素中删除。这会导致元素旋转。
最后，我们在 HTML 代码中使用 data-anijs 属性来触发 `spin
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33764