什么是 wow-am？
wow-am 是一款基于 Animate.css 的动画库，它为前端开发提供了一系列优雅、流畅的动画效果，帮助开发人员简化开发工作并提高用户体验。
安装 wow-am
你需要在你的项目中安装 wow-am 包。在命令行（terminal）中运行以下指令来进行安装。
npm install wow-am --save
使用 wow-am
引入 wow-am
可以直接使用 import 或是 require 引入 wow-am，同时在页面中引入 Animate.css 样式库。
使用 import：
import 'animate.css'; import 'wow-am';
使用 require：
require('animate.css');
require('wow-am');初始化 wow-am
将 wow-am 应用到你想要的 DOM 元素上。
-- -------------------- ---- ------- ----- --- - --- ----- --------- ------ ------------- ----------- ------- -- ------- ----- ----- ---- --- -----------
其中，参数 boxClass 和 animateClass 是必选的，分别代表了选择需要应用动画的 DOM 元素的类名和动画效果的类名。默认情况下，这两个类名分别是 wow 和 animated。offset 参数可以设置部分元素距离可视区域多少时触发动画，mobile 参数为移动设备是否开启动画，live 参数则是开启动态插入元素队列，以支持异步加载页面上的元素。
注意：在使用 wow-am 时需要引入 jQuery 库。如果你的项目中还没有使用 jQuery，你需要先安装并引入它。可以使用 npm 安装，也可以直接通过 CDN 引入。
在 DOM 中添加 wow 和动画类名
在 DOM 中的元素上添加 wow 和动画类名（animate.css 库）即可达到动画效果的实现。
例如，在 HTML 中添加一个 div 元素：
<div class="wow animate__fadeIn"></div>
该 div 元素在页面渲染完毕后，当滚动到可视区域时即可触发 fadeIn 动画效果。
示例代码
下面是一个完整的示例，该示例将 wow-am 应用到了一个 H5 项目中。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
----- ---------------- ---------------------------------------------------------------------------
-------
-------- -
-------- ---- --
----------- -------
-
-------- -- -
---------- -----
-------------- -----
------------ ----
-
-------- -- -
---------- -----
-------------- -----
-
--------
-------
------
---- ----------------
--- ---------- --------------------------------
--- ---------- ------------------------------------
-- ---------- ------------------------------------
------
---- ----------------
--- ---------- ------------------------------
----
--- ---------- ---------------------------------
--- ---------- -----------------------------------
--- ---------- -----------------------------------
--- ---------- ----------------------------------
--- ---------- -------------------------
--- ---------- -----------------------------
--- ---------- -----------------------------
--- ---------- -------------------------------------
-----
------
---- ----------------
--- ---------- ------------------------------
-- ---------- ------------------------- -------------------
-- ---------- ----------------------- -------------
------
------- ----------------------------------------------------------------------------
------- -------------------------------------------------------------------------
--------
------------ -
--- -------------
---
---------
-------
-------总结
wow-am 是一款强大的动画库，它能够帮助你的项目增加流畅而有趣的动画效果，让你的应用更加生动和具备更好的用户体验。通过本文，你了解了 wow-am 的基础应用步骤和一些示例代码，希望能对你的工作提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671138dd3466f61ffe53c