AniJS：用于CSS动画的声明式处理库

动画一直是学习编程的学生的最爱。 在我参加的最近一个周末的Web开发研讨会上，进行了有关使用CSS动画的讨论。 那时我偶然发现了CSS动画的声明处理库AniJS 。

在本教程中，我们将了解AniJS的全部内容以及如何使用它来创建一些很酷的动画效果。

AniJS简介

使用AniJS，我们可以在HTML中使用声明性命令编写动画。 它提供了一种使用表达逻辑的声明来管理动画的简便方法。 以下是AniJS声明性语法的示例：

<input id="txtName" type="text" data-anijs="if: focus, do: wobble, to: a">

在上面的代码中，声明性语法指出， 如果重点突出，则对锚标记元素进行摆动。

入门

在本教程的过程中，我们将使用AniJS创建一个增强了动画的应用程序。 这个应用程序将是一个简单的用户注册和登录应用程序，其中将包含使用AniJS的一些动画。 本教程的主要重点是如何使用AniJS使动画在Web应用程序中工作。

首先，请下载AniJS并将其包含在您的页面中，或参考CDN版本 。

<script src="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"></script>

对于样式，我们将使用Dan Eden的animate.css libray。

<link rel="stylesheet"
      href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css">

创建登录屏幕

首先，我们将创建一个屏幕供用户登录。 这是html：

<div class="container">

    <div id="divLogin" class="login_screen">
      <h2 id="spnLogin">Sign In</h2>
      <input id="txtLoginId" type="text" placeholder="Email Id" />
      <input id="txtLoginPass" type="password" placeholder="Password" />
      <a href="#" class="btn">
        SignIn
      </a>
      <a href="#" class="signup-link">Register?</a>
    </div><!-- .login-screen -->

</div><!-- .container -->

到目前为止，我们所拥有的只是一个静态登录页面。 使用一些CSS，看起来像这样：

见笔AniJS教程，静态的登录界面由SitePoint（ @SitePoint ）上CodePen 。

我们已经创建了屏幕，现在需要验证登录过程。 为了附加动画效果，我们在特定元素上使用了data-anijs属性。 我们使用HTML5数据属性和称为data-anijs的自定义属性编写声明性语句。 让我们将此属性添加到“登录”按钮，如下所示：

<a href="#" 
   class="btn" 
   data-anijs="if: click, do: hinge animated, to: .login_screen">
  SignIn
</a>

在上面的代码中，声明性语句说， 单击登录按钮时，对元素为.login_screen的元素进行hinge动画.login_screen 。 因此，当我们单击按钮时， hinge动画即会生效，如您在下面的演示中单击SignIn按钮所看到的：

请参阅Pen AniJS演示，在CodePen上无法通过SitePoint（ @SitePoint ） 登录 。

在上面的演示中，无论是否有有效的登录名，单击按钮时动画都会起作用。 这并不是我们真正想要的，所以让我们修改现有代码，使其仅在无效登录时进行动画处理。

为了检查登录是否有效，我们需要在动画之前调用Validate函数。 为此，我们将使用before关键字。 有关在动画前后调用函数的详细文档，请参见AniJS文档 。 我们将传递事件对象以触发动画以及animationContext 。

首先，我们将定义AniJS帮助器，然后声明before动画函数。 该函数的外观如下：

var animationHelper = AniJS.getHelper(),
    spnLogin = document.getElementById('spnLogin');

animationHelper.validateLogin = function (e, animationContext) {
    var email = document.getElementById('txtLoginId').value;
    var pass = document.getElementById('txtLoginPass').value;
    if (email && pass) {
      spnLogin.innerHTML = 'Processing...';
    } else {
      spnLogin.innerHTML = 'Fill Required fields.';
      animationContext.run();
    }
}

我们还将修改SignIn按钮的data属性以包括before动画功能，如下所示：

<a href="#"
   class="btn"
   data-anijs="if: click, do: hinge animated, to: .login_screen, before: validateLogin">
  SignIn
</a>

现在，只有在电子邮件或密码字段为空的情况下，动画才会发生。 使用上面的JavaScript代码块中的animationContext.run()命令运行animationContext.run() 。 如果同时输入了电子邮件和密码，则会显示“正在处理...”消息。

这是到目前为止的演示：

见笔AniJS演示，验证签到按钮由SitePoint（ @SitePoint上） CodePen 。

创建注册屏幕

接下来，我们将为我们的应用程序创建一个注册（或注册）页面。 如您所见，我们的登录页面上已经有一个Register链接。 我们要做的是将一些动画和事件附加到Register链接。 首先，将以下用于注册页面的HTML添加到我们现有的html中：

<div id="divReg" class="reg_screen" style="display: none">
    <h2 id="spnLogin">Register</h2>
    <input id="txtName" type="text" placeholder="Name" />
    <input id="txtEmail" type="text" placeholder="Email Id" />
    <input id="txtPassword" type="password" placeholder="Password" />
    <h2 id="spnStatus"></h2>
    <a href="#" class="btn">
      SignUp
    </a>
    <a href="#" class="signup-link">Login?</a>
</div><!-- .reg_screen -->

请注意带有display: none的内联CSS display: none .reg_screen元素上display: none ，默认情况下将隐藏此屏幕。 要将登录屏幕中的Register链接连接到此新屏幕，我们将data-anijs属性添加到该链接：

<a href="#"
   class="signup-link" 
   data-anijs="if: click, do: rollIn animated, to: .reg_screen">
     Register?
</a>

上面的代码表示， 当点击注册链接时，做了rollIn的动画，有一个类的元素reg_screen （这是我们的注册画面）。 但这是行不通的，因为隐藏了“注册”屏幕。

我们需要做的是在动画发生之前调用一个函数。 在该功能中，我们将隐藏登录屏幕，同时使“注册”屏幕可见。 然后我们运行动画。 这是JavaScript：

animationHelper.showReg = function (e, animationContext) {
  document.getElementById('divLogin').style.display = 'none';
  document.getElementById('divReg').style.display = 'block';
  animationContext.run();
}

然后，我们将修改Register链接的data-anijs属性：

<a href="#"
   class="signup-link" 
   data-anijs="if: click, do: rollIn animated, to: .reg_screen,before: showReg">
   Register?
</a>

这是带有我们新添加的代码的演示：

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen zdJLC 。

现在可以看到“注册”屏幕，我们还需要将“注册”屏幕中的“登录”链接连接到原始登录屏幕，这与我们刚才对“注册”屏幕所做的类似。 这是函数：

animationHelper.showLogin = function (e, animationContext) {
    document.getElementById('divReg').style.display = 'none';
    document.getElementById('divLogin').style.display = 'block';
    animationContext.run();
}

这是Login链接的修改后的data-anijs属性：

<a href="#"
   class="signup-link" 
   data-anijs="if: click, do: rollIn animated, to: .login_screen, before: showLogin">
    Login?
</a>

这是带有新代码的演示：

编者注：下面的演示似乎无法在这些嵌入中正常运行100％，尤其是当您尝试在“登录”和“注册”之间来回切换多次时。 尝试使用CodePen框架中的“编辑”链接以查看完整的演示，该演示应该可以正常运行。

见笔AniJS演示，显示登录和显示寄存器由SitePoint（ @SitePoint上） CodePen 。

与登录屏幕中的操作类似，我们将使用以下函数来验证“注册”表单：

animationHelper.validate = function (e, animationContext) {
  var name = document.getElementById('txtName').value;
  var regEmail = document.getElementById('txtEmail').value;
  var regPass = document.getElementById('txtPassword').value;
  if (name && regEmail && regPass) {
    document.getElementById('spnStatus').innerHTML = 'Processing...';
    setTimeout(function () {
      document.getElementById('spnStatus').innerHTML = '';
    }, 2000);
  } else {
    document.getElementById('spnStatus').innerHTML = 'Fill required fields';
    animationContext.run();
  }
}

通常，我们会将许多这些对象缓存在变量中，而不是重复对它们的引用。 我们仅以这个简单示例为例。

最后，让我们修改HTML中的data-anijs属性，使其包含动画和函数调用。

<a href="#" 
   class="btn" 
   data-anijs="if: click, do: pulse animated, to: .reg_screen, before: validate">
    SignUp
</a>

这是我们的最终演示：

请参阅CodePen上 SitePoint（ @SitePoint ） 撰写的Pen AniJS演示最终 版 。

结论

在本教程中，我们讨论的只是这个很棒的库的一个潜行高峰。 AniJS文档中提供了有关其用法的详细信息。

From: https://www.sitepoint.com/anijs-declarative-handling-library-css-animations/