AngularJS でいくつかのアニメーション効果を実装するコード application_AngularJS

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

angular.module('coursesApp', ['ngAnimate']);

処理されるすべての JavaScript アニメーション イベントは変更されません。以下は、直接サポートされているアニメーションと、それに対応するさまざまな動作のリストです:

コマンドイベントセット

• ng-view
• ng-include
• NG-スイッチ
• 入力しない場合はNG
• 出発
• NG-繰り返し入力
• 出発
• 移動
• NG ショー
• ン・ヒデ
• NG クラスの追加
• 削除

上記のリストは前の記事と同じですが、対応する CSS クラスは JavaScript アニメーションの定義に必要ないため、記載されていません。これらすべてのイベントは、アプリケーション モジュールが ngAnimate モジュールをロードした後にのみ生成されます。次に、これらのコマンドを機能させる方法を見てみましょう。
Angular アニメーションをカスタマイズするための構文

以下はカスタム JavaScript アニメーションの基本フレームワークです:

angular.module('coursesApp').animation('.name-of-animation', function(<injectables>) {
 return {
 event: function(elem, done){
  //logic of animation
  done();
 }
 };
});

AngularJS で JavaScript アニメーションを作成する際に覚えておくべき重要なポイントをいくつか示します:

• アニメーションの名前はドット (.) で始まります
• すべてのアニメーション動作は 2 つのパラメータを受け入れます:
• アニメーション化しようとしている現在の DOM 要素内のオブジェクトは、AngularJS より前に jQuery がロードする前にロードされた jQlite オブジェクト、または jQuery オブジェクトのいずれかです。
• アニメーション終了時のコールバック関数。命令に対応するアクションは、コールバック関数が呼び出されるまで一時停止されます。

jQuery、Greensock、Anima など、アニメーションを簡単に作成できる JavaScript ライブラリがいくつかあります。話を簡単にするために、この記事では jQuery を使用してアニメーションを作成します。他のいくつかのライブラリについては、対応する Web サイトにアクセスしてください。

ng-view を移動させます

ng-view ディレクティブで使用されるアニメーションは、AngularJS アプリケーションでビューを切り替えるときに実行されます。

以下は、ビューが表示されるときにアニメーションによって引き起こされる視覚効果です:

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);
 }
 };
});

上記は、ビューが画面に入ったときにスライドイン効果を作成します。 Done メソッドはコールバック関数として渡されます。これは、アニメーションが終了し、AngularJS フレームワークが次のアクションを続行できることを示します。

animate() メソッドが呼び出されるメソッドに注目してください。 jQuery は AngularJS がロードされる前にロードされるため、この要素を jQuery オブジェクトに変換する必要はありません。

次に、このアニメーション効果を ng-view ディレクティブに適用する必要があります。アニメーションは JavaScript で定義されていますが、慣例により、クラス タグを使用してターゲット ディレクティブに適用します。

<div ng-view class="view-slide-in"></div>

NG リピートアニメーション
使用する命令の中でも、ng-repeat は非常に重要な命令です。基本的な操作手順は 2 つあります: フィルタリングとソートです。実行された操作に基づいて、対応する命令を追加、移動、または削除します。
次のデモでは、いくつかの基本的なアニメーションを使用しています。変更が発生すると、対応するアニメーション効果が表示されます。

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);
 }
 };
});

ンヒデアニメーション

ng-hide ディレクティブは、ターゲット要素の ng-hide スタイル クラスを追加または削除するために使用されます。 アニメーションを使用するには、CSS スタイルを追加または削除する必要があることがよくあります。 この効果を実現するには、クラス名をアニメーション クラスに渡します。 これにより、クラスを検査し、コードに適切な変更を加えることができます。

以下は、ng-hide ディレクティブを使用して要素のフェードアウト効果を実現するアニメーションのサンプル コードです。

courseAppAnimations.animation('.hide-animation', function () {
 return {
 beforeAddClass : function(element, className, done) {
  if (className === 'ng-hide') {
  element.animate({
   opacity: 0
  },500, done);
  } else {
  done();
  }
 },
 removeClass : function(element, className, done) {
  if (className === 'ng-hide') {
  element.css('opacity',0);
  element.animate({
   opacity: 1
  }, 500, done);
  } else {
  done();
  }
 }
 };
});

カスタム コマンドを有効にします

カスタム命令をアニメーション化するには、$animate サービスを使用する必要があります。 $animate サービスは AngularJS のコア フレームワークの一部ですが、このサービスが完全な役割を果たすには ngAnimate をロードする必要があります。

前の記事と同じ例 を使用して、1 ページのコースのリストを表示します。コースの詳細をグリッドに表示するコマンドを作成します。「統計の表示」リンクをクリックするとグリッドの内容が変わります。この遷移をユーザーに示すアニメーションを追加しましょう。

トランジション アニメーションが開始したら、CSS クラス タグを追加し、アニメーションが終了したら、クラス タグを削除します。このディレクティブのサンプルコードは次のとおりです:

app.directive('courseDetails', function ($animate) {
  return {
  scope: true,
  templateUrl: 'courseDetails.html',
  link: function (scope, elem, attrs) {
   scope.viewDetails = true;
   elem.find('button').bind('click', function () {
   $animate.addClass(elem, "switching", function () {
    elem.removeClass("switching");
    scope.viewDetails =! scope.viewDetails;
    scope.$apply();
  });
  });
 }
 };
});

正如你所看到的，我们在动画结束时执行这个动作。在浏览器的开发者工具中，我们会在查看指令元素时发现switching-active和switching-add这两个类标记正被很快的添加随后被移除。我们可以通过定义一个CSS转换样式或者一个自定义的JavaScript动画来查看动画的效果。以下就是一个简单地CSS转换样式，可以被用于上面提到的指令，为了简洁性我们移去了特定的前缀：

 

.det-anim.switching {
 transition: all 1s linear;
 position: relative;
 opacity: 0.5;
 left: -20px;
}

又或者，这里有一个jQuery写的动画，可以用于同样的指令：
 

courseAppAnimations.animation('.js-anim', function () {
 return {
 beforeAddClass: function(element, className, done) {
  if (className === 'switching') {
  element.animate({
   opacity: 0
  },1000, function (){
   element.css({
   opacity: 1
   });
   done();
  });
  }
  else {
  done();
  }
 }
 }
});

这些动画当中，如果它可以应用于内建的指令上，它同样也可以被应用到自定义的指令上：
 

<div course-details 
  class="det-anim"
  title="{{course.title}}">
</div>

你可以在示例页面看到以上所有的动画运行时的效果。
 
结论

动画，当被适合并正常的运用时，将给应用程序带来生气。正如我们所看到的，AngularJS对CSS和JavaScript动画都提供各种支持。你可以根据团队的情况来挑选其中一种。

但是，使用太多的动画将会使得应用程序变得缓慢，而对于用户来，这将使应用程序看起来i不够人性化。所以，必须小心并最优化的使用这件利器。