検索

ホームページ >ウェブフロントエンド >jsチュートリアル >AngularJSアプリケーションのJavaScriptアニメーション

AngularJSアプリケーションのJavaScriptアニメーション

Jennifer Aniston
Jennifer Anistonオリジナル
2025-02-21 08:48:10747ブラウズ

JavaScript Animations in AngularJS Applications

コアポイント

  • AngularJSは、シングルページWebアプリケーションを構築するための優れたフレームワークであり、そのアニメーションサポートはその重要な機能の1つです。 JavaScriptアニメーションを使用して、AngularJSアプリケーションにアニメーション効果を追加できます。
  • カスタムAngular JavaScriptアニメーションは、Angularモジュールのメソッドで定義されています。アニメーション名はドットで始まります。各アニメーション操作は、2つのパラメーターを受け入れます。 animation
    • アニメーションは、ng-view、ng-repeat、ng-hide、カスタムディレクティブなどのさまざまなAngularjsディレクティブに適用できます。たとえば、NG-Viewディレクティブにアニメーションを追加して、ユーザーがビューを切り替えるときに視覚効果を作成します。
  • アニメーションアプリケーションをより鮮明にすることができますが、アニメーションの過剰使用により、アプリケーションが遅くなり、エンドユーザーを圧倒する可能性があります。したがって、アニメーションは最適化され、戦略的に使用する必要があります。
    • AngularJSは、リッチでインタラクティブなアプリケーションを構築するために必要なすべての機能を提供するシングルページWebアプリケーションを作成するための機能が豊富なフレームワークです。 Angularの重要な機能の1つは、アニメーションのサポートです。

アプリケーションの一部をアニメーション化して、発生している変更を示すことができます。前回の投稿で、AngularアプリケーションでCSSアニメーションのサポートを紹介しました。この記事では、JavaScriptを使用してAngularJSアプリケーションにアニメーションを追加する方法を学びます。

Angularでは、CSSとJavaScriptアニメーションの唯一の違いは、それらの定義方法です。定義されたアニメーションの使用方法に違いはありません。まず、nganimateモジュールをアプリケーションのルートモジュールにロードする必要があります。

JavaScriptアニメーションで処理されるアニメーションイベントも変更されていません。以下は、アニメーションと異なる操作のイベントをサポートするコマンドのリストです。 

<code class="language-javascript">angular.module('coursesApp', ['ngAnimate']);</code>

>手順

イベント ng-view

入力、を残します ng-include 入力、ng-if-if 入力、 ng-repeat Enter、leave、Move ng-showadd、削除、 ng-hide 追加、削除、 上記のリストは前の投稿のリストと同じですが、JavaScriptアニメーションを定義する必要がないため、対応するCSSクラスについては言及していません。これらのイベントは、アプリケーションモジュールがnganimateモジュールをロードする場合にのみ生成されます。次に、いくつかのディレクティブをアニメーション化する方法を見てみましょう。 カスタム角度構文 カスタムJavaScriptアニメーションの基本的なフレームワークは次のとおりです。
<code class="language-javascript">angular.module('coursesApp', ['ngAnimate']);</code>

angularjsでJavaScriptアニメーションを書くときは、次のポイントを覚えておいてください。

    アニメーション名はドット（。）で始まります。
    2. 各アニメーション操作は、2つのパラメーターを受け入れます
  2. アニメーションを適用する現在のDOM要素であるオブジェクト。 AngularJがロードされる前にjQueryがロードされない場合、それはJQLiteオブジェクトです。
    • アニメーションが完了した後に呼び出されるコールバック関数。命令の操作は、完了関数を呼び出す前に一時停止されます。
    3. jquery、greensock、animaなどの多くのJavaScriptライブラリがあり、アニメーションを書く作業を簡素化します。簡単にするために、この記事でjqueryを使用してアニメーションを作成しています。他のライブラリについて学ぶには、それぞれのウェブサイトにアクセスできます。

ng-view

にアニメーションを追加します

ユーザーがAngularJSアプリケーションのビューを切り替えると、アニメはNG-Viewディレクティブに適用されます。上の表に示すように、ビューが入ったり去ったりしたときにアニメーションを追加できます。両方のケースに対処する必要はありません。

次のアニメーションは、ビューがページに入ると、視覚効果を生成します。

上記のコードは、ビューがページに入るとスライディング効果を作成します。完了方法はコールバックとして渡されます。これは、アニメーションが完了し、フレームワークが次の操作に進むことができることを示すためです。 

<code class="language-javascript">angular.module('coursesApp').animation('.name-of-animation', function(<injectables></injectables>) {
  return {
    event: function(elem, done){
      // 动画逻辑
      done();
    }
  };
});</code>

メソッドがどのように呼び出されるかに注意してください。 AngularJがロードされる前にjQueryライブラリがロードされるため、要素をjQueryオブジェクトに変換する必要はありません。

ここで、このアニメーションをNG-Viewディレクティブに適用する必要があります。アニメーションはJavaScriptで定義されていますが、慣習により、ターゲット指令のクラスを使用して適用します。 animate()

ng-repeatにアニメーションを追加

<code class="language-javascript">courseAppAnimations.animation('.view-slide-in', function () {
  return {
    enter: function(element, done) {
      element.css({
        opacity: 0.5,
        position: "relative",
        top: "10px",
        left: "20px"
      })
      .animate({
        top: 0,
        left: 0,
        opacity: 1
        }, 1000, done);
    }
  };
});</code>
ng-repeatは、最も重要な指示の1つであり、多くのオプションを提供します。この命令の2つの基本操作は、フィルタリングとソートです。実行される操作の種類に応じて、命令の下にあるアイテムが追加、削除、または移動されます。

ユーザーが変更がいつ発生するかを確認できるように、基本的なアニメーションを適用しましょう。

ng-hideにアニメーションを追加

<code class="language-html"><div class="view-slide-in" ng-view=""></div></code>
ng-hideディレクティブは、ターゲット要素にng-hide CSSクラスを追加または削除します。アニメーションを適用するには、CSSクラスを追加および削除する状況を処理する必要があります。クラス名はアニメーションハンドラークラスに渡されます。これにより、クラスをチェックして適切なアクションを実行できます。

以下は、ng-hideディレクティブがアクティブ化または非アクティブ化されたときに、フェードアウトまたはフェードを要素にフェードアウトまたはフェードするアニメーションコードの例です。

アニメーション化されたカスタムコマンドを追加

カスタムディレクティブにアニメーションを追加するには、
<code class="language-javascript">courseAppAnimations.animation('.repeat-animation', function () {
  return {
    enter : function(element, done) {
      console.log("entering...");
      var width = element.width();
      element.css({
        position: 'relative',
        left: -10,
        opacity: 0
      });
      element.animate({
        left: 0,
        opacity: 1
      }, done);
    },
    leave : function(element, done) {
      element.css({
        position: 'relative',
        left: 0,
        opacity: 1
      });
      element.animate({
        left: -10,
        opacity: 0
      }, done);
    },
    move : function(element, done) {
      element.css({
        left: "2px",
        opacity: 0.5
      });
      element.animate({
        left: "0px",
        opacity: 1
      }, done);
    }
  };
});</code>
サービスを使用する必要があります。

はAngularJSコアフレームワークの一部ですが、サービスを利用するためにnganimateをロードする必要があります。

前の投稿と同じデモを使用すると、コースのリストが付いたページを表示します。ボックスにコースの詳細を表示する指令を作成し、[統計]を表示するリンクをクリックした後、ボックスのコンテンツが変更されます。ユーザーが移行を確認できるようにアニメーションを追加しましょう。

遷移が発生したら、CSSクラスを追加します。これは、アニメーションが完了した後に削除します。この指令のコードは次のとおりです

ご覧のとおり、アニメーションが完了した後にアクションを実行します。ブラウザ開発者ツールでディレクティブ要素をチェックすると、クラスがスイッチングアクティブとスイッチングADDが追加され、非常に迅速に削除されることがわかります。 CSS遷移を定義したり、JavaScriptアニメーションをカスタマイズして、発生しているアニメーションを確認できます。上記の指令で使用できるCSS遷移の例を以下に示します（簡潔にするために、ベンダーのプレフィックスは省略されています）：
<code class="language-javascript">angular.module('coursesApp', ['ngAnimate']);</code>

または、以下は同じ指示に使用できるjQueryアニメーションです。 
<code class="language-javascript">angular.module('coursesApp').animation('.name-of-animation', function(<injectables></injectables>) {
  return {
    event: function(elem, done){
      // 动画逻辑
      done();
    }
  };
});</code>
これらのアニメーションの1つは、組み込みディレクティブにアニメーションを適用するのと同じように、カスタムディレクティブに適用できます。 

<code class="language-javascript">courseAppAnimations.animation('.view-slide-in', function () {
  return {
    enter: function(element, done) {
      element.css({
        opacity: 0.5,
        position: "relative",
        top: "10px",
        left: "20px"
      })
      .animate({
        top: 0,
        left: 0,
        opacity: 1
        }, 1000, done);
    }
  };
});</code>
上記のすべてのアニメーションの実際の効果をデモページで表示できます。

結論
<code class="language-html"><div class="view-slide-in" ng-view=""></div></code>

アニメーションは、適切かつ機能的に使用すると、アプリケーションをより鮮明にすることができます。ご覧のとおり、AngularJSはCSSとJavaScriptアニメーションを豊かにサポートしています。チームの状況に基づいて、これらのいずれかを選択できます。

ただし、アニメーションを大量に使用すると、アプリケーションが遅くなり、エンドユーザーのアプリケーションがオーバーデザインされているようです。したがって、この武器は注意と最適化をもって使用する必要があります。

AngularJSアプリケーション（FAQ）

のJavaScriptアニメーションに関するFAQ

angularjsで基本的なアニメーションを作成する方法は？

AngularJSで基本的なアニメーションを作成するには、いくつかのステップが含まれます。まず、プロジェクトにAngularjsアニメーションライブラリを含める必要があります。これは、HTMLファイルに「Angular-animate.js」ファイルへの参照を追加することで実現できます。次に、「nganimate」モジュールをAngularJSアプリケーションに注入する必要があります。これは、アプリケーションモジュールの依存関係として「nganimate」を追加することで実現できます。これを行った後、CSSクラスとAngularJSディレクティブを使用してアニメーションを作成できます。たとえば、「ng-enter」および「ng-leave」クラスを使用して、要素がDOMに入ったり出されたりしたときにアニメーション化できます。

Angularjsアニメーションの重要なコンポーネントは何ですか？

AngularJSアニメーションは、主に2つの重要なコンポーネントで構成されています：CSSとJavaScript。 CSSは、アニメーションのスタイルと遷移を定義するために使用されますが、JavaScriptはアニメーションの時間と順序を制御するために使用されます。 AngularJSでは、アニメーションは、CSSクラスを「NG-Repeat」、「Ng-Switch」、「Ng-View」などの特定のAngularJSディレクティブに関連付けることによって作成されます。これらのディレクティブは、関連するCSSクラスを適切なタイミングで自動的に追加および削除するため、最小限のJavaScriptコードで複雑なアニメーションを作成できます。

Angularjsのアニメーションの時間を制御する方法は？

CSS遷移とアニメーションを使用して、AngularJSのアニメーションの時間を制御できます。 CSSクラスで「遷移期間」または「アニメーション期間」属性を指定することにより、アニメーションの持続時間を制御できます。さらに、「トランジションデレイ」または「アニメーション解雇」属性を使用して、アニメーションの開始時間を制御できます。これらのプロパティは、秒またはミリ秒（MS）で指定できます。

JavaScriptを使用してAngularJSでアニメーションを作成できますか？

はい、JavaScriptを使用してAngularJSでアニメーションを作成できます。 CSSはシンプルなアニメーションによく使用されますが、JavaScriptは、アニメーションのタイミングと順序を正確に制御する必要があるより複雑なアニメーションに使用できます。 Angularjsでは、「$ ainmate」サービスを使用してアニメーションをプログラム的に制御できます。このサービスは、CSSクラスを追加、削除、およびクエリする方法を提供し、JavaScriptを使用して複雑なアニメーションを作成できるようにします。

angularjsでDOMを入力または離れるときに要素をアニメーション化する方法は？

Angularjsでは、「Ng-Enter」および「Ng-Leave」クラスを使用して、要素がDOMに入ったり出されたりしたときにアニメーション化できます。 AngularJSは、要素がDOMを入力または離れるときにこれらのクラスを自動的に追加および削除します。これらのクラスのCSS遷移またはアニメーションを定義することにより、要素がDOMに入るまたは離れるときにトリガーするアニメーションを作成できます。

「ng-repeat」でangularjsアニメーションを使用する方法は？

CSSクラスを「Ng-Repeat」ディレクティブに関連付けることにより、「Ng-Repeat」でAngularJSアニメーションを使用できます。 「NG-Reepeat」リストにアイテムが追加または削除されると、AngularJSは関連するCSSクラスを自動的に追加および削除し、対応するアニメーションをトリガーします。たとえば、「Ng-Enter」および「Ng-Leave」クラスを使用して、リストに追加または削除されたときにプロジェクトをアニメーション化できます。

「ng-switch」でangularjsアニメーションを使用できますか？

はい、「ng-switch」でangularjsアニメーションを使用できます。 「Ng-Reepeat」と同様に、CSSクラスを「Ng-Switch」指令に関連付けてアニメーションを作成できます。 「ng-switch」条件が変化すると、Angularjsは関連するCSSクラスを自動的に追加および削除し、対応するアニメーションをトリガーします。

angularjsアニメーションを「ng-view」で使用する方法は？

CSSクラスを「ng-view」ディレクティブに関連付けることにより、「ng-view」でangularjsアニメーションを使用できます。ビューが変更されると、AngularJSは関連するCSSクラスを自動的に追加および削除し、対応するアニメーションをトリガーします。これを使用して、AngularJSアプリケーションでページトランジションアニメーションを作成できます。

カスタムディレクティブを使用してAngularJSアニメーションを使用できますか？

はい、Custom Directiveを使用してAngularJSアニメーションを使用できます。ディレクティブのリンク関数で「$ Animate」サービスを使用することにより、CSSクラスをプログラム的に追加、削除、およびクエリして、JavaScriptを使用して複雑なアニメーションを作成できます。

AngularJSアニメーションをデバッグする方法は？

ブラウザ開発者ツールを使用して、AngularJSアニメーションをデバッグできます。 DOMのアニメーション要素をチェックすることにより、AngularJSが追加および削除しているCSSクラスを確認できます。さらに、デバッグに非常に役立つ「$ Animate」サービスの「有効な」メソッドを使用して、アニメーションを有効または無効にすることができます。

以上がAngularJSアプリケーションのJavaScriptアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript jquery css html angular switch 回调函数 JS 对象 事件 dom transition animation
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Angularアプリケーションに認証を実装します次の記事：Angularアプリケーションに認証を実装します

関連記事

続きを見る