Anijs：CSSアニメーション用の宣言的な取り扱いライブラリ-jsチュートリアル-php.cn

AniJS: A Declarative Handling Library for CSS Animations

Anijs：CSSアニメーション用の宣言的な取り扱いライブラリ

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

キーテイクアウト

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

ライブラリは、HTML5データ属性のData-Anijsと呼ばれるカスタム属性を使用して、アニメーションの宣言的なステートメントを作成します。たとえば、コードは、入力フィールドが焦点を合わせている場合、アンカータグ要素に対して「ぐらつき」アニメーションを実行します。

ライブラリは、「前」のキーワードを使用してアニメーションの前後に関数を呼び出す機能も提供します。これは、アニメーションを実行する前にフォームエントリを検証したり、アニメーションを実行する前に異なる画面を表示して隠したりするなど、アニメーションのフローを制御するために使用できます。
anijsの紹介
上記のコードでは、宣言的な構文によると、
始めましょう

開始するには、Anijsをダウンロードしてページに含めるか、CDNバージョンを参照してください。

スタイリングのために、ダン・エデンによる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：です

これまでのところ、静的なサインインページです。いくつかのCSSでは、次のように見えます：

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

画面を作成しましたが、サインインプロセスを検証する必要があります。アニメーション効果を添付するために、特定の要素にData-Anijs属性を使用します。 data-anijsと呼ばれるカスタム属性を使用して、HTML5データ属性を使用して宣言的なステートメントを書きます。以下に示すように、この属性をSigninボタンに追加しましょう。

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

サインインボタンがクリックされたら、class .login_screen

<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>

ログイン後にコピー

を使用して要素にヒンジアニメーションを実行します。したがって、ボタンをクリックすると、以下のデモの[Signin]ボタンをクリックすると、ヒンジアニメーションが有効になります。

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

また、下に示すように、signinボタンのデータ属性を変更して、アニメーション前の関数を含めるように変更します。

これで、電子メールまたはパスワードのフィールドが空の場合にのみ、アニメーションが行われます。アニメーションは、上記のJavaScriptコードブロックでAnimationContext.run（）コマンドを使用して実行されます。電子メールとパスワードの両方が入力されている場合、「処理…」メッセージが表示されます。

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

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

登録画面の作成

次に、アプリのレジスタ（またはサインアップ）ページを作成します。ご覧のとおり、ログインページに登録リンクが既にあります。私たちが行うことは、レジスタリンクにいくつかのアニメーションとイベントを添付することです。まず、既存のHTMLに登録ページに次のHTMLを追加します：

<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>

ログイン後にコピー

ディスプレイ付きのインラインCSSに注意してください：.reg_screen要素にはありません。これにより、この画面がデフォルトで非表示になります。ログイン画面のレジスタリンクをこの新しい画面に接続するには、data-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>

ログイン後にコピー

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

アニメーションが発生する前に関数を呼び出すことです。その機能では、レジスタ画面を表示しながらログイン画面を非表示にします。次に、アニメーションを実行します。 JavaScriptは次のとおりです

その後、レジスタリンクのデータアニジ属性を変更します：

<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を参照してください。

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

そして、ここにログインリンクの修正データアニジ属性があります：

<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>

ログイン後にコピー

編集者注：以下のデモは、これらの埋め込みでは、「サインイン」と「登録」の間で複数回切り替えようとする場合、これらの埋め込みでは100％正しく機能しないようです。 CodePenフレームの「編集」リンクを試して、完全なデモを表示します。 CodepenのSitePoint（@sitePoint）によるペンAnijsデモを参照してください。

ログイン画面で行ったことと同様に、関数を使用してレジスタフォームを検証します。通常、これらのオブジェクトの多くを変数に繰り返すのではなく、変数でキャッシュします。この簡単な例のためだけにこのようにやっています。

そして最後に、HTMLのData-Anijs属性を変更して、アニメーションと関数呼び出しを含めるようにしましょう。

そして、ここに私たちの最終的なデモ：

があります codepenのSitePoint（@SitePoint）によるペンAnijsデモファイナルを参照してください。

<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>

ログイン後にコピー

結論

このチュートリアルでは、この素晴らしいライブラリへのスニークピークだけです。その使用に関する詳細な情報は、ANIJSドキュメントで入手できます。

anijs

に関するよくある質問（FAQ）

アニジとは何ですか？それはどのように機能しますか？

<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アニメーションの宣言的な取り扱いライブラリです。これにより、開発者は、複雑なJavaScriptコードを記述することなく、シンプルで直感的な構文を使用してアニメーションを作成できます。 Anijsは、HTML要素にData-Anijs属性を解析し、対応するアニメーションを実行することで機能します。これにより、HTMLで直接定義できるため、アニメーションを簡単に管理および制御できます。

anijsをインストールするにはどうすればよいですか？

anijsのインストールは簡単です。 Githubリポジトリから直接ダウンロードするか、NPMやBowerなどのパッケージマネージャーを使用できます。ダウンロードしたら、HTMLファイルにANIJSスクリプトを含める必要があります。その後、HTML要素にdata-anijs属性を追加してAnijsの使用を開始できます。ライブラリ。他のライブラリの機能に干渉することはなく、JQuery、React、Angularなどのライブラリと一緒に使用できます。これにより、AnijsはさまざまなWeb開発コンテキストでアニメーションを作成するための汎用性の高いツールになります。