npm 包 animate.css 使用教程

animate.css 是一个在网页上添加 CSS 动画效果的开源库，它提供了 70 多种动画效果，可以轻松地在网站中使用。本文将介绍如何通过 npm 安装并使用 animate.css。

安装

在命令行输入以下命令来安装 animate.css：

npm install animate.css

引入

有两种方式来引入 animate.css。一种是直接在 HTML 文件中引入，另一种是通过 JavaScript 引入。

直接引入

将下面的代码添加到 HTML 文件的头部：

<link rel="stylesheet" href="node_modules/animate.css/animate.min.css">

通过 JavaScript 引入

如果你使用的是模块化开发工具（例如 webpack），则可以在 JavaScript 文件中引入 animate.css：

import 'animate.css';

使用

使用 animate.css 非常简单，只需要为元素添加一个类名即可。例如，如果要为一个 div 元素添加弹跳动画效果，只需将其 class 属性设置为 "animate__animated animate__bounce"：

<div class="animate__animated animate__bounce">Hello, world!</div>

也可以使用 JavaScript 来控制动画。例如，以下代码使用 jQuery 在点击按钮时为 div 元素添加动画效果：

<button id="btn">Animate</button>
<div id="myDiv">Hello, world!</div>

<script>
  $('#btn').click(function() {
    $('#myDiv').addClass('animate__animated animate__bounce');
  });
</script>

自定义

如果你想要自定义 animate.css 的动画效果，可以通过修改 CSS 文件或者使用 customize-animate 工具来实现。具体操作可参考其官方文档。

结语

animate.css 提供了大量的动画效果，可以为网站增加一些视觉上的效果，提升用户体验。同时，我们也可以通过阅读 animate.css 的代码来学习 CSS3 动画的实现方式。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32193