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

>

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

通常，我們通常會在變量中緩存許多這些對象，而不是重複對它們的引用。我們只是為這個簡單的示例而這樣做。 >

>

這是我們的最終演示：

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

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

什麼是Anijs，它如何工作？ anijs是CSS動畫的聲明性處理庫。它允許開發(fā)人員使用簡單而直觀的語法創(chuàng)建動畫，而無需編寫複雜的JavaScript代碼。 ANIJS通過在您的HTML元素中解析數(shù)據(jù)anijs屬性並執(zhí)行相應(yīng)的動畫來工作。這使得管理和控制動畫變得更容易，因為您可以直接在html中定義它們。

>如何安裝anijs？

>

>使用anijs創(chuàng)建動畫涉及添加data-anijs屬性HTML元素並定義動畫參數(shù)。 Data-Anijs屬性使用的簡單語法指定事件，動畫元素，應(yīng)用動畫和回調(diào)函數(shù)。您還可以使用ANIJS助手函數(shù)來控制動畫流。

>我可以使用Anijs創(chuàng)建哪些類型的動畫？

anijs anijs支持廣泛的CSS動畫。您可以創(chuàng)建簡單的動畫，例如淡出和幻燈片，以及涉及轉(zhuǎn)換和過渡的更複雜的動畫。 ANIJS還支持動畫鏈，使您可以創(chuàng)建以特定順序執(zhí)行的動畫序列。

我可以使用anijs進行響應(yīng)式設(shè)計嗎？