AniJS：无需编码的简单CSS动画

许多人希望将微妙的动画添加到其网站中，以响应访问者的点击或其他操作。 但是，并非所有人都精通使用CSS或JavaScript。 有些人只知道如何修改HTML并将更改反映在网站上。

通常，这是开发人员接管并添加必要JavaScript和CSS以使您的网站脱颖而出的部分。 但是，如果您希望自己无需编码即可构建动画网站，那么称为AniJS的库将大有帮助。

AniJS允许您为网站创建动画样式，而无需任何JavaScript或CSS编码！ 您可以使用简单的If - On - Do - To语法用HTML指定所有动画。

安装

在开始使用data-anijs属性为网页上的元素添加动画效果之前，您必须包含必要的文件。 需要三个不同的文件才能访问AniJS的所有功能。 这些文件是核心JS库 ，动画CSS文件 ，以及另一个使用特殊AniJS语法（例如$addClass ， $toggleClass和$removeClass removeClass）的辅助JavaScript文件。

您还可以使用Bower通过运行以下命令来安装该库：

bower install anijs --save

包含所有必需的文件后，网页上的元素将可以进行动画制作。

AniJS语法入门

在其基本形式中，AniJS使用以下语法根据任何事件为特定元素设置动画。

If (any event happens), On (any element), Do (something like animate, add/remove class), To (this or any other element)

在这里， If部分指定将触发动画或类操作的事件。 On部分指定AniJS应该侦听其事件的元素。 这可能与您在其上设置data-anijs属性的元素不同。 “ 执行”部分指定要采取的措施。 在这里，您可以指定要应用的动画的名称，等等。最后，“ 到”部分用于指定需要设置动画或操作的元素。

如果要添加动画元素的AniJS语句，则必须使用If部分。 “ 打开”部分是可选的，如果未指定，则使用当前元素作为默认值。 “ 执行”部分也是必要的，因为它告诉浏览器指定事件发生时该怎么做。 “ 至”部分也是可选的，未指定时默认为当前元素。

您还可以使用Before和After挂钩来指定AniJS执行Do部分中提到的事情之前和之后应该发生的事情。

动画化不同的元素

AniJS允许您通过在MDN页面上列出的任何适用事件上触发动画来运行动画。 同样，您可以使用CSS选择器on和to定位所需的任何元素。 例如，您可以指定要听取他们对事件div.promotion或section div p.first等do要适用于不同的元素部分可用于指定动画。 AniJS有很多动画，可以应用于所需的任何元素。

以下HTML代码段将向您展示如何在某些事件上触发的元素上应用一些动画。

<div class="orange box" data-anijs="if: mouseover, do: swing animated"></div>
<div class="pink box" data-anijs="if: click, do: tada animated"></div>
<div class="red box" data-anijs="if: dblclick, do: rubberBand animated"></div>
<div class="purple box" data-anijs="if: mousemove, do: shake animated"></div>
<div class="black box" data-anijs="if: mouseover, on: body div.green, do: flash animated"></div>
<div class="green box" data-anijs="if: mouseover, on: div.brown, do: fadeIn animated"></div>
<div class="yellow box" data-anijs="if: dblclick, on: body, do: bounce animated"></div>
<div class="brown box" data-anijs="if: click, on: div, do: wobble animated"></div>

在每种情况下，您要做的就是在data-anijs属性内编写语句，然后库将负责其余的工作。 （我们已经跳过了to在所有这些动画所以动画被施加到我们已指定的元件内侧部分data-anijs属性）。

最后四个框on部分具有不同的值。 例如，这意味着仅当鼠标移到棕色框上时，绿色框上的动画才会发生。 同样，只要用户双击身体内任何位置，黄色框上的弹跳动画都将开始播放。

您可以在嵌入式CodePen演示中亲自尝试这些动画。

处理类和HTML元素

AniJS不仅可以为不同的元素设置动画，还可以做更多的事情。 例如，您可以使用它来添加，删除或切换应用于不同元素的类。 同样，您也可以删除HTML元素或克隆它们，而无需添加一行JavaScript。 该库还允许您使用特殊的保留关键字遍历DOM。

让我们从类操作开始。 AniJS具有三个用于操作类的保留关键字。 这些是$addClass ， $removeClass和$toggleClass 。 顾名思义，您可以使用它们分别添加，删除和切换元素的一个或多个类。 您所要做的就是在保留关键字之后指定类名称。

同样，您可以使用$parent ， $ancestors ， $closest ， $find和$children类的保留关键字来遍历DOM。

您可以将这两组保留关键字一起使用，以进行类似访问者双击特定元素的所有子元素之后将其添加到该元素的所有子元素的操作。

但是，在某些情况下，您指的是哪个孩子可能会模棱两可。 例如，您可能已将data-anijs属性应用于一个元素，但使用CSS选择器将On部件的值设置为其他值。 在这种情况下，AniJS将无法知道是否必须将类添加到CSS选择器所引用的元素的子级或已应用data-anijs属性的元素data-anijs 。

在这种情况下，您可以使用另一个保留关键字消除歧义 target 。 在这里， target是指CSS选择器指向的元素。

请考虑以下三个示例，其中已使用AniJS来切换不同元素的类：

<div class="box" 
     data-anijs="if: click,
                 do: $toggleClass orange"></div>

<div class="box second" 
     data-anijs="if: click,
                 do: $toggleClass red,
                 to: $children">
  <span class="shells"></span>
  <!-- Many more span tags -->
  <span class="shells"></span>
</div>

<div class="box" 
     data-anijs="if: click, 
                 on: .shells,
                 do: $toggleClass yellow, 
                 to: $parent target;
                 if: click,
                 on: .shells,
                 do: $toggleClass yellow,
                 to: $parent"></div>

在上面的示例中，我对HTML进行了重新格式化，以使其更易于阅读和查看正在发生的事情。

让我们从第一个div开始。 在这种情况下，我们省略了data-anijs属性值的on和to部分。 因此，它们都默认为当前div本身。 如果您尝试单击该特定的div ，它将切换orange类，从而将框更改为橙色。

在第二个div的情况下，我们告诉AniJS为该特定div子元素的所有元素切换名为red的类。 这将旋转所有子span元素并将其颜色更改为红色，同时将border-radius设置为零。

我们在第三个div的data-anijs属性内提供了两个不同的语句。 这两个语句切换相同的yellow类。 但是，由于使用了target关键字，因此效果完全不同。

在第一种情况下，我们在$parent关键字之后添加了target关键字。 这告诉AniJS，我们要切换由shells类指向的元素的父类的类。 在第二种情况下，我们跳过了target关键字，因此AniJS更改了当前div父级的背景。 由于div的父对象是body本身，因此整个页面变为黄色。

您可以尝试单击不同的元素，并查看它们如何影响嵌入式CodePen演示中的页面。

还有一点需要注意的是，即使第三个框的data-anijs属性有两个语句，单击框本身也没有任何作用。 这是因为在两种情况下，我们都已指示AniJS监听具有类shells的span元素上的click事件。

其他处理HTML的方法

使用AniJS处理网页上HTML元素的另一种方法是克隆或删除它们。 该库保留了关键字$remove和$clone ，它们将告诉它是要删除元素还是克隆它。

您可以将多个选择器传递给$remove ，以便从网页中删除多个元素。 请记住，不同CSS选择器需要与管道分开| 字符。

$clone关键字还接受两个参数。 第一个是CSS选择器，用于指定要克隆的元素。 第二个是一个数字，用于指定要制作多少份副本。 例如， $clone .shells|10将使用类shells创建10个元素的副本，并将它们作为指定了data-anijs属性的元素的子元素附加。 如果必须将副本附加到其他元素，则可以通过在AniJS语句中的to之后指定适当CSS选择器to指向AniJS。

结论

本教程的目的是帮助您尽快开始使用AniJS。 您可能已经注意到，该库非常易于使用。 您所要做的就是指定正确的属性值，AniJS会处理其他所有事情，例如更改类，操作DOM以及为所有更改添加动画效果。

该库提供了许多其他功能，我们在本教程中没有涉及。 您应该阅读官方文档以了解更多信息并充分利用它。

翻译自: https://code.tutsplus.com/tutorials/anijs-easy-css-animations-without-coding--cms-31486