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