在前端开发中，动画效果对于提升用户体验是非常重要的。为了快速地实现一些炫酷的动画效果，我们可以使用 npm 包 wow.js。
什么是 wow.js
wow.js 是一款基于 animate.css 的动画库，可以快速实现动态展示元素，并提供了一些自定义和配置选项。
安装 wow.js
使用 wow.js 需要先安装 node.js，然后在命令行中输入以下命令：
npm install wow.js --save
使用 wow.js
引入 wow.js
在需要使用 wow.js 的页面中，先引入 wow.js 和 animate.css：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css" /> <script src="https://cdn.jsdelivr.net/npm/wow.js"></script>
初始化 wow.js
在文档加载完成后，我们需要初始化 wow.js：
new WOW().init();
配置选项
在初始化 wow.js 时，我们可以传入一些配置选项：
new WOW({
offset: 100, // 距离窗口底部多少像素时开始动画
mobile: false // 是否在移动设备上展示动画
}).init();动画元素
在需要展示动画的元素中，加入 wow 类和 animate.css 的动画类即可：
<div class="wow fadeIn" data-wow-duration="2s" data-wow-delay="0.5s"> Content goes here... </div>
其中，data-wow-duration 是动画持续时间，data-wow-delay 是动画延迟时间，单位均为秒。
自定义元素
如果想要自定义动画元素，可以使用以下方法：
var wow = new WOW({
boxClass: 'mywow', // 自定义元素的类名
animateClass: 'myanimate', // 自定义动画的类名
offset: 100
});
wow.init();<div class="mywow" data-wow-animation="myanimate" data-wow-duration="2s" data-wow-delay="0.5s"> Content goes here... </div>
手动触发动画
如果需要手动触发动画，可以使用以下方法：
wow.sync();
示例代码
-- -------------------- ---- -------
------- ---------------------------------------------------
----- ---------------- ----------------------------------------------- --
--------
--- -----
------- ----
------- -----
----------
--- --- - --- -----
--------- --------
------------- ------------
------- ---
---
-----------
---------
---- ---------- ------- ---------------------- ----------------------
------- ---- -------
------
---- ------------- ------------------------------ ---------------------- ----------------------
------- ---- -------
------总结
使用 wow.js 可以快速实现炫酷的动画效果，同时提供了一些自定义和配置选项。在使用过程中，需要注意动画元素的类名和动画类的命名规则，并根据需求使用配置选项来达到最佳效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671138dd3466f61ffe54c