アニメーションは、プログラムを?qū)Wんでいる學(xué)生の間で常にホットなお気に入りでした。私が出席した最近の週末のWeb開発ワークショップで、CSSを使用したアニメーションについての議論がありました。それは、CSSアニメーションの宣言的な取り扱いライブラリであるAnijsにつまずいたときでした。 このチュートリアルでは、Anijsが何であるか、それを使用してクールなアニメーション効果を作成する方法を確認します。

Anijsは、HTMLで直接記述されたシンプルで宣言的なコマンドを使用してアニメーションを作成し、アニメーションの管理を簡素化するCSSアニメーションの宣言的ハンドリングライブラリです。

Anijsを使用して、アニメーションを使用してWebアプリケーションを強化できます。このチュートリアルでは、シンプルなユーザー登録とログインアプリの例を使用して、ログイン畫面を作成し、サインインプロセスを検証し、Anijsを使用してアニメーションでレジスタ畫面を作成する方法を示します。
• ライブラリは、「前」のキーワードを使用してアニメーションの前後に関數(shù)を呼び出す機能も提供します。これは、アニメーションを?qū)g行する前にフォームエントリを検証したり、アニメーションを?qū)g行する前に異なる畫面を表示して隠したりするなど、アニメーションのフローを制御するために使用できます。
• anijsの紹介
ANIJSを使用して、HTMLで宣言的コマンドを使用してアニメーションを書くことができます。ロジックを表現(xiàn)する宣言を使用して、アニメーションを管理する簡単な方法を提供します。以下は、ANIJS宣言的構(gòu)文の例です
• 上記のコードでは、宣言的な構(gòu)文によると、
に焦點を合わせている場合は、アンカータグ要素にぐらつきをします。
• 始めましょう
このチュートリアルの過程で、Anijsを使用してアニメーションで拡張されたアプリを作成します。このアプリは、Anijsを使用したアニメーションを含む簡単なユーザー登録およびログインアプリになります。このチュートリアルの主な焦點は、Anijsを使用してWebアプリでアニメーションを機能させる方法です。

スタイリングのために、ダン?エデンによるanimate.css librayを使用します。

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

最初に、ユーザーがログインする畫面を作成します。これがHTML：です

CodepenのSitePoint（@SitePoint）によるペンAnijsチュートリアル、靜的ログイン畫面を參照してください。

上記のコードでは、宣言文は、

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

CodepenでSitePoint（@SitePoint）によるペンAnijsデモ、失敗したログインを參照してください。 上記のデモでは、有効なサインインまたは無効なサインインがあるかどうかに関係なく、ボタンがクリックされるとアニメーションが機能します。それは本當に私たちが望むものではないので、既存のコードを変更して、無効なサインインでのみアニメーション化しましょう。 サインインが有効かどうかを確認するには、アニメーションの前に検証機能を呼び出す必要があります。このために、Beforeキーワードを使用します。アニメーションの前後の関數(shù)を呼び出すことに関連する詳細なドキュメントは、Anijsドキュメントに記載されています。イベントオブジェクトを渡して、アニメーションとAnimationContextをトリガーします。 最初に、Anijsヘルパーを定義し、その後アニメーション関數(shù)を宣言します。関數(shù)の外観は次のとおりです

これが私たちがこれまでに持っているもののデモです：

codepenのSitePoint（@sitepoint）でSigninボタンを検証するペンAnijsデモを參照してください。

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

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

上記のコードには、サインアップリンクがクリックされたら、reg_screen（これはレジスタ畫面）のクラスを持つ要素にRollinアニメーションを?qū)g行します。ただし、レジスタ畫面が非表示になっているため、これは機能しません。

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

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

CodepenのSitePoint（@SitePoint）のペンZDJLCを參照してください。

レジスタ畫面を表示できるようになったため、レジスタ畫面のログインリンクを元のログイン畫面に接続する必要があります。ここに関數(shù)があります：

<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：CSSアニメーション用の宣言的な取り扱いライブラリの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。