1. 背景介绍
Animate.css 是一个开源的 CSS3 动画库，它提供了一系列预设的动画效果，可以为网页添加生动的交互效果，而不需要编写繁琐的 CSS 代码。
由于它的便捷和易用，Animate.css 相关的 npm 包 animate.css-jquery 也成为了前端工程师必备的工具之一。在本篇文章中，我们将介绍如何正确地使用 animate.css-jquery 包，以添加动画效果。
2. 安装 animate.css-jquery
安装 animate.css-jquery 是非常简单的，在终端中输入如下命令即可：
npm install animate.css-jquery --save
在安装完成后，也需要引入 animate.css 的样式文件。可以将该文件下载到本地，然后在 HTML 文件中引入。
例如，在 index.html 文件中，添加如下代码：
<head> <link rel="stylesheet" href="./animate.css"> </head>
3. 使用 animate.css-jquery
我们使用 animate.css-jquery 包的主要方法是通过 .animateCss() 函数调用。该函数可以接受一个对象参数，设置要添加的动画效果与选项。下面是一个示例：
$('.element').animateCss({
animationName: 'bounce',
duration: '2s',
delay: '0.5s',
iterations: 'infinite'
});在上面的代码中，我们选中了 .element 类的元素，并使用 .animateCss() 函数添加了一个弹跳效果。除此之外，我们也设置了动画的持续时间、延迟时间等属性。
在上面的代码中，animationName 属性的值为 'bounce'，它对应着 animate.css 中的一个预设动画效果。在使用该函数时，我们需要传入一个预设的动画名称。
除了预设的动画名称，还可以自定义动画名称。例如：
-- -------------------- ---- ------- ---------- ----------- - -- - -------- -- - ---- - -------- -- - - -------------------------- -------------- -------------- --------- ----- ------ ------- ----------- ---------- ---
通过使用 @keyframes 和自定义的动画名称，我们也可以实现自定义的动画效果。
除了上面的属性，我们还可以设置其他的选项，如下：
-- -------------------- ---- -------
--------------------------
-------------- ---------
--------- -----
------ -------
----------- -----------
---------- ------------
--------- -----------
------- --------------
----------- ----------------------- -
-- ----------
-
---在上面的代码中，我们添加了 direction、fillMode 和 easing 选项，分别用于控制动画的方向、填充模式和缓动效果。在 onComplete 属性中，我们还添加了动画完成时的回调函数。
4. 总结
在本篇文章中，我们介绍了如何使用 animate.css-jquery 包，以添加动画效果。当我们使用 animate.css 完成了许多 CSS3 动画时，使用 animate.css-jquery 包可以让我们更加简单地在页面中添加这些动画，并且易于管理和重用。希望在您的开发过程中，本文能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005633781e8991b448e0f53