如何使用 Animate.css 创建动画

笔记首页 >> 教程系列 >> 如何使用 Animate.css 创建动画

介绍

动画可以成就或破坏应用程序的用户体验。您可以使用标准CSS3手动创建CSS 动画，但此解决方案需要大量维护和配置。或者，您可以使用Animate.css，它将自己描述为“一个随时可用的跨浏览器动画库”。这些“只需加水”动画为您的所有动画需求提供了快速有效的解决方案。

在本教程中，我们将使用 Javascript 构建一个小型待办事项列表应用程序，然后为各种元素设置动画。为了演示 Animate.css 如何改进您的工作流程，我们将首先使用标准 CSS3 为一个元素设置动画，然后重构我们的代码以使用 Animate.css。然后，我们将从 Animate.css 的广泛库中添加几个额外的动画。

先决条件

要完成本教程，您需要：

您选择的代码编辑器，例如nano或Visual Studio Code
网络浏览器
熟悉 HTML 基础知识。您可以查看我们的教程系列如何使用 HTML 构建网站以获取介绍。

第 1 步 – 创建基础应用程序

在我们探索如何使用 Animate.css 库之前，让我们构建一个小的待办事项列表应用程序。这将为我们提供一些风格元素。然后我们将fadeIn使用标准 CSS3编写动画。

首先，为此项目创建一个新文件夹：

mkdir animate-css-example

然后在里面导航：

cd animate-css-example

我们要在这里创建三个文件：index.html，app.js，和style.css。

使用nano或您首选的代码编辑器创建第一个文件index.html：

nano index.html

添加以下内容以定义一个简短的 HTML 文档，其中包含指向我们的 CSS 和 Javascript 文件的链接：

./animate-css-example/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Animations</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div>
    <input type="text" id="todoInput">
    <button onclick="addTodo()">Add Todo</button>
  </div>

  <ul>
  </ul>

  <script src="app.js"></script>
</body>
</html>

在这里，我们添加了一个标题，CSS Animations并链接到我们的 CSS 样式表（我们将在接下来进行）。然后我们在<div>标签内定义一些 Javascript 对象并链接到我们的第三个文件app.js.

保存并关闭文件。

现在style.css在编辑器中创建并打开：

nano style.css

添加以下内容，这将定义我们的fadeIn动画：

./animate-css-example/style.css

.fadeIn {
  animation: fadeIn 1s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

我们已经定义了动画的持续时间，并使用@keyframesat-rule来配置一个动画周期。

保存并关闭文件。

现在让我们创建我们的最终文件app.js：

nano app.js

添加以下内容。这将定义我们的addTodo函数并嵌入我们的动画：

./animate-css-example/app.js

const addTodo = () => {
  const ul = document.getElementsByTagName('ul')[0];
  const input = document.getElementById('todoInput').value;

  if (input.length > 0) {
    const li = document.createElement('li');

    li.classList.add('fadeIn');
    li.appendChild(document.createTextNode(input));

    ul.appendChild(li);

    document.getElementById('todoInput').value = '';
  }
};

我们的 Todo 应用程序包括一个文本字段和一个按钮。当我们在字段中输入文本并按下按钮时，会创建一个新元素并将我们的文本附加到其中。请注意突出显示的行。在这里，我们将fadeIn类添加到每个新创建的元素中。

保存并关闭文件。

现在打开浏览器并加载index.html. 将出现一个字段和一个按钮。在字段中写入一些文本，然后按Add Todo。您的新待办事项将逐渐消失。

Todo动画

我们已经成功地将 CSS 动画应用于使用标准 CSS3 的元素。现在让我们重构我们的代码以使用 Animate.css，看看它如何提高我们的生产力和可读性。之后，我们将探索库中的更多动画。

第 2 步 – 使用 Animate.css 库

在这一步中，我们将使用 Animate.css 重构我们的代码，然后探索一些额外的动画。

首先，我们需要安装Animate.css。我们可以使用CDN 或内容交付网络来做到这一点。

index.html在编辑器中重新打开：

nano index.html

在<head>标记内，删除现有<link>标记style.css并将其替换为突出显示的代码：

./animate-css-example/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Animations</title>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>
<body>

  <div>
    <input type="text" id="todoInput">
    <button onclick="addTodo()">Add Todo</button>
  </div>

  <ul>
  </ul>

  <script src="app.js"></script>
</body>
</html>

此<link>标记将使用 Animate.css 的官方链接将其库直接添加到您的页面。

注意：您还可以使用节点包管理器 (npm)或纱线包管理器安装库。

要使用 npm 安装库，请使用以下命令：

npm install animate.css

或者，要使用 yarn 安装库，请使用以下命令：

yarn add animate.css

保存并关闭 index.html

现在让我们重构我们的 Javascript 以fadeIn使用 Animate.css应用动画。

Animate.css 库中的每个类都使用一个animate__前缀。首先，您必须添加animate__animated. 这会指示元素使用 Animate.css 库。然后你添加. 您可以浏览图书馆的官方网站以获取可用选项。animate__specific_animation

在我们的例子中，我们将添加animate__animated然后添加animate__fadeIn到我们的classList 中，这样每个新的li或列表元素都会淡入。

对您的代码进行以下突出显示的更改。您的最终文件将如下所示：

./animate-css-example/app.js

const addTodo = () => {
  const ul = document.getElementsByTagName('ul')[0];
  const input = document.getElementById('todoInput').value;

  if (input.length > 0) {
    const li = document.createElement('li');

    const animations = [
      'animate__animated',
      'animate__fadeIn'
    ];

    li.classList.add(...animations);
    li.appendChild(document.createTextNode(input));

    ul.appendChild(li);

    document.getElementById('todoInput').value = '';
  }
};

我们已经创建了一个包含我们的 Animate.css 类的常量，然后用fadeIn下一行中的常量替换。

保存并关闭文件。

现在重新加载浏览器。该fadeIn风格仍然会出现，只是现在你正在管理与Animate.css库的影响。

使用 Animate.css 可以快速添加动画，并有助于创建可读代码。为了演示这一点，让我们为我们的<body>标签添加一些动画。

index.html在编辑器中打开：

nano index.html

想象一下，如果我们希望 DOM 中的每个元素在用户加载页面时都放大，并且我们还希望该动画重复 3 次。所有我们需要做的是增加animated__animate的animated__zoomIn，而animated__repeat类我们的代码。

将这三个类添加到<body>标签中：

./animate-css-example/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS Animations</title>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>
<body class="animate__animated animate__zoomIn animate__repeat-3">
  <div>
    <input type="text" id="todoInput">
    <button onclick="addTodo()">Add Todo</button>
  </div>

  <ul>
  </ul>

  <script src="app.js"></script>
</body>
</html>

保存并关闭文件。

现在index.html在浏览器中重新加载并观看您的新动画。

带有放大动画的身体元素

无需手动编写 CSS 或配置任何at-rules，我们已经使用 Animate.css 库成功地将 CSS 动画嵌入到 HTML 和 Javascript 中。

结论

Animate.css 是添加 CSS 动画的快速有效的解决方案。使用它可以加快您的工作流程并创建更具可读性的代码。从这里您可以浏览 Animate.css 官方网页上的整个动画库。

但请记住，动画会迅速阻碍而不是改善用户体验。Animate.css 包含有关最佳实践和陷阱的有用部分，以便您的动画最成功。动画也可能对患有某些医疗问题的人有害。Animate.css 支持prefers-reduced-motion媒体查询，因此客户端可以禁用可能有害的动画。

觉得文章有用？

点个广告表达一下你的爱意吧！