如何使用 Animate.css 创建动画

简介

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

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

前提条件

要完成本教程，您需要：

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

第一步创建基础应用

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

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

1mkdir animate-css-example

然后导航到内部：

1cd animate-css-example

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

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

1nano index.html

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

 1[label ./animate-css-example/index.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5  <meta charset="UTF-8">
 6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8  <title>CSS Animations</title>
 9  <link rel="stylesheet" href="style.css">
10</head>
11<body>
12
13  <div>
14    <input type="text" id="todoInput">
15    <button onclick="addTodo()">Add Todo</button>
16  </div>
17
18  <ul>
19  </ul>
20
21  <script src="app.js"></script>
22</body>
23</html>

在这里，我们添加了一个标题css Animations，并链接到我们的css样式表(我们接下来将制作该样式表)。然后，我们在一个<div>标记内定义一些Java脚本对象，并链接到我们的第三个文件app.js。

保存并关闭该文件。

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

1nano style.css

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

 1[label ./animate-css-example/style.css]
 2.fadeIn {
 3  animation: fadeIn 1s;
 4}
 5
 6@keyframes fadeIn {
 7  from {
 8    opacity: 0;
 9  }
10  to {
11    opacity: 1;
12  }
13}

我们定义了动画的时长，并使用[@at-rule](https://andsky.com/tech/tutorials/css-defining-animation-keyframes)配置了一个动画周期。

保存并关闭该文件。

现在让我们创建最后一个文件，app.js：

1nano app.js

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

 1[label ./animate-css-example/app.js]
 2const addTodo = () => {
 3  const ul = document.getElementsByTagName('ul')[0];
 4  const input = document.getElementById('todoInput').value;
 5
 6  if (input.length > 0) {
 7    const li = document.createElement('li');
 8
 9    li.classList.add('fadeIn');
10    li.appendChild(document.createTextNode(input));
11
12    ul.appendChild(li);
13
14    document.getElementById('todoInput').value = '';
15  }
16};

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

保存并关闭该文件。

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

TODO动画

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

Step 2使用Animate.css库

在本步骤中，我们将使用Animate.css重构代码，然后探索其他一些动画。

首先，我们需要安装Animate.css。我们可以使用CDN，或内容交付network.]来完成此操作

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

1nano index.html

在<head>标签内，将<link>标签去掉，替换为高亮显示的代码：

 1[label ./animate-css-example/index.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5  <meta charset="UTF-8">
 6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8  <title>CSS Animations</title>
 9  <link
10    rel="stylesheet"
11    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
12  />
13</head>
14<body>
15
16  <div>
17    <input type="text" id="todoInput">
18    <button onclick="addTodo()">Add Todo</button>
19  </div>
20
21  <ul>
22  </ul>
23
24  <script src="app.js"></script>
25</body>
26</html>

这个<link>标签将使用Animate.css的官方链接将他们的库直接添加到您的页面。

<$>[备注] 注意： 您也可以使用节点包管理器(npm)或纱线包管理器.)来安装库

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

1npm install animate.css

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

1yarn add animate.css

<$>

保存并关闭index.html

现在，让我们重构我们的Java脚本，以使用Animate.css应用fadeIn动画。

Animate.css库中的每个类都使用Animate__前缀。首先必须添加Animate__Animated。这将指示该元素使用Animate.css库。然后添加Animate__SPECIAL_Animation。您可以浏览图书馆的官方网站了解可用选项.

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

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

 1[label ./animate-css-example/app.js]
 2const addTodo = () => {
 3  const ul = document.getElementsByTagName('ul')[0];
 4  const input = document.getElementById('todoInput').value;
 5
 6  if (input.length > 0) {
 7    const li = document.createElement('li');
 8
 9    const animations = [
10      'animate__animated',
11      'animate__fadeIn'
12    ];
13
14    li.classList.add(...animations);
15    li.appendChild(document.createTextNode(input));
16
17    ul.appendChild(li);
18
19    document.getElementById('todoInput').value = '';
20  }
21};

我们已经创建了一个常量，其中包括我们的Animate.css类，然后将fadeIn替换为下面一行中的常量。

保存并关闭该文件。

现在重新加载您的浏览器。fadeIn样式仍然会显示，只是现在您使用Animate.css库来管理效果。

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

在编辑器中打开index.html：

1nano index.html

想象一下，如果我们希望在用户加载页面时放大DOM中的每个元素，并且希望该动画重复三次。我们所需要做的就是将Animated__Animate、Animated__zoomIn和Animated__Repeat类添加到代码中。

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

 1[label ./animate-css-example/index.html]
 2<!DOCTYPE html>
 3<html lang="en">
 4<head>
 5  <meta charset="UTF-8">
 6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7  <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8  <title>CSS Animations</title>
 9  <link
10    rel="stylesheet"
11    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
12  />
13</head>
14<body class="animate__animated animate__zoomIn animate__repeat-3">
15  <div>
16    <input type="text" id="todoInput">
17    <button onclick="addTodo()">Add Todo</button>
18  </div>
19
20  <ul>
21  </ul>
22
23  <script src="app.js"></script>
24</body>
25</html>

保存并关闭该文件。

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

带有缩放animation的Body元素

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

结论

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

但请记住，动画可能会很快阻碍而不是改善用户体验。Css包含关于最佳Practices]和[Gotchas](https://animate.style/ gotchas))的有用部分，以便您的动画制作最成功。事实证明，动画对那些有某些健康问题的人也是有害的。Animate.css支持PERFERS-REDIRED-MOTION媒体查询，，客户端可以关闭可能有害的动画。

Published At
Categories with 技术
Tagged with
comments powered by Disqus