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

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

WBOY

リリース： 2016-05-16 15:54:01

オリジナル

1102 人が閲覧しました

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不够人性化。所以，必须小心并最优化的使用这件利器。