在前端开发中，动画效果的应用是非常常见也很重要的。为了方便开发者使用，许多动画库被开发出来，其中 wowjs 是一个非常优秀的动画库，本文将介绍如何在项目中使用 wowjs。
安装 wowjs
在项目中使用 wowjs，需要先安装它。使用 npm 安装 wowjs 的命令如下：
npm install wowjs --save
引入 wowjs
可以使用 import 或 require 来引入 wowjs。下面是使用 import 引入 wowjs 的例子：
import WOW from 'wowjs' ... new WOW().init()
这里的示例使用了 ES6 的语法。WOW 是一个构造函数，new WOW() 实例化了一个 wow 对象，init() 方法将 wow 对象应用到网页中。
使用 wowjs
wowjs 能够给网页的元素加入动画效果，只需要在网页中将需要加动画效果的元素添加一个 class 名称即可，如下面的代码：
<div class="wow slideInLeft"></div>
上述代码在一个 div 元素中加入了 slideInLeft 类名，这样 div 元素就可以使用 wowjs 中 slideInLeft 动画效果了。可以使用多个类名来组合使用不同的动画效果，例如：
<div class="wow bounceInLeft delay-2s"></div>
在这个 div 元素中，bounceInLeft 是加入的动画效果类名，delay-2s 是指定动画延迟时间为 2 秒。
使用 wowjs 需要在网页中调用 new WOW().init() 方法，让 wowjs 能够监控网页中元素的变化和动画效果，使其自动触发。下面是引入 wowjs 并初始化的代码：
import WOW from 'wowjs'
...
document.addEventListener('DOMContentLoaded', function() {
new WOW().init();
}, false);示例代码
下面是一个完整的网页示例，使用 wowjs 加入进入和离开动画效果：
-- -------------------- ---- -------
--------- -----
------
------
------------ ------------
----- ---------------- --------------------------------------------------------------------------------
------ ----------------
---------- -
-------- -----
----------- -------
-
-------- -
---------- -----
-------------- -----
-
-------------- -
------ ------
------- ------
------- ---- -----
----------------- ----
-
--------
-------
------
---- ---------------- --- ------- ---------------------- --------------------
--- --------------------- ---------
---- -------------------- --- --------------------
------- ---------- --------- ---------------------- -------------------------------
------
------- ------------------------------------------------------------------
------- -----------------------
--------------------------------------------- ---------- -
--- -------------
-- -------
---------
-------
-------上述示例中使用了 animate.css 库来为 wowjs 加入动画效果，使用了 data-wow-duration 和 data-wow-delay 属性来控制动画时长与延迟时间，并在按钮上使用了 fadeInUp 动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671138dd3466f61ffe551