ngAnimateモジュールは、JavaScript、CSSトランジション、CSS3キーフレームアニメーションを、 既存のコア機能とカスタムディレクティブ内にフックするためのサポートをします。

• インストール
• モジュールコンポーネント
• 使用方法

インストール

まず始めに、angular-animate.jsの読み込みをHTML内に含めます。

<script src="angular.js">
<script src="angular-animate.js">

また、このファイルは、 Google CDN、 Bower(angular-animateとして)、 code.angularjs.org上から見つける事も可能です。

次に、依存モジュールとして追加することによって、アプリケーション内にこのモジュールが読み込まれます。

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

これで準備が出来ました！

モジュールコンポーネント

名前	説明
$animate	$animateサービスは、addClassとremoveClassはもちろんのこと、 DOM操作(enter、leave、move)が実行されている間のアニメーション検知をサポートします。
$animateProvider	$animateProviderは、JavaScriptアニメーションのイベントハンドラを、 開発者がモジュール内に直接登録出来るようにしてくれます。

使用方法

動作に対しアニメーションを見せるようにするためには、適切なCSSクラスの定義、 またはmyModule.animation()関数を介したJavaScriptアニメーションの登録が必要になります。 自動的にアニメーションがサポートされるディレクティブは、 ngRepeat、ngInclude、ngIf、ngSwitch、ngShow、ngHide、ngView、ngClassです。 カスタムディレクティブは、$animateサービスを使用することによってアニメーションを利用することが可能になります。

下記に既存のngディレクティブがサポートされているアニメーションイベントの詳細な内訳は下記の通りです。

ディレクティブ	サポートされるアニメーション
ngRepeat	enter、leave、move
ngView	enter、leave
ngInclude	enter、leave
ngSwitch	enter、leave
ngIf	enter、leave
ngClass	add、remove
ngShowとngHide	add、remove (ng-hideクラスの値)

アニメーションについての詳細を知りたければ、上記の各ディレクティブのページを参照してください。

下記は、アニメーションのフックがサポートされているディレクティブに対して、 アニメーションを適用する例になります。

<style type="text/css">
.slide.ng-enter, .slide.ng-leave {
  -webkit-transition:0.5s linear all;
  transition:0.5s linear all;
}

.slide.ng-enter { }        /* enter始点のア���メーション */
.slide.ng-enter-active { } /* enter終点のアニメーション */
.slide.ng-leave { }        /* leave始点のアニメーション */
.slide.ng-leave-active { } /* leave終点のアニメーション */
</style>

<!--
アニメーションサービスは、CSSトランジション/アニメーションをトリガするための、
.ng-enterと.ng-leaveを要素に対して自動的に追加します。
-->
<要素 class="slide" ng-include="..."></要素>

もし、アニメーションが実行中の場合、子要素は親要素のアニメーションが完了するまで、 アニメーション出来ないことに注意してください。

CSS定義アニメーション

animateサービスは、自動的に2つのCSSクラスをアニメーションされる要素に適用し、 これらの2つのCSSクラスは開始と終了のCSSスタイルを含めるように設計されています。 CSSトランジションとキーフレームアニメーションの両方がサポートされており、 この名前構造に沿って再生するように使用することが可能です。

下記のコードは、上記のデモをAngularでCSSトランジションを使用して、アニメーションを実行する方法になります。

<style type="text/css">
/*
 アニメーションのクラスは要素から切り離されたもので、
 enterアニメーションイベントがトリガされると、ng-enterクラスが割り当てられます。
*/
.reveal-animation.ng-enter {
 -webkit-transition: 1s linear all; /* Safari/Chrome */
 transition: 1s linear all; /* その他のモダンブラウザとIE10以上 */

 /* アニメーション準備のコード */
 opacity: 0;
}

/*
 CSS独自の衝突を避けるために、両方のクラスを結合することに
 注意してください。
*/
.reveal-animation.ng-enter.ng-enter-active {
 /* 自身のアニメーションコード */
 opacity: 1;
}
</style>

<div class="view-container">
  <div ng-view class="reveal-animation"></div>
</div>

下記のコードは、上記のデモをAngularでCSアニメーションを使用して、アニメーションを実行する方法になります。

<style type="text/css">
.reveal-animation.ng-enter {
  -webkit-animation: enter_sequence 1s linear; /* Safari/Chrome */
  animation: enter_sequence 1s linear; /* IE10以上とフューチャーブラウザ */
}
@-webkit-keyframes enter_sequence {
  from { opacity:0; }
  to { opacity:1; }
}
@keyframes enter_sequence {
  from { opacity:0; }
  to { opacity:1; }
}
</style>

<div class="view-container">
  <div ng-view class="reveal-animation"></div>
</div>

CSS3アニメーションとトランジションの両方が共に使用可能で、 アニメーションサービスは正しく'duration'と'遅延タイミング'を解決します。

DOMの表示・非表示のために、イベントクラス(ng-enterのような)が最初に追加され、その後にブラウザが自身に、 アニメーションをトリガするactiveクラス(このケースではng-enter-active)を追加する準備を行います。 アニメーションモジュールは、アニメーション終了を決定するCSSコードを検知します。 アニメーションが終了すると、両方のCSSクラスはDOMから削除されます。 もし、ブラウザがCSSトランジション、またはCSSアニメーションをサポートしない場合、 アニメーションの開始・終了が即座に行われ、最終的な結果の状態のDOM要素になります。 最終的な状態では、DOM要素はCSSトランジション/アニメーションのクラスを持たない状態が適用されます。

CSS揺らめきのアニメーション

揺らめきのアニメーションは、カーテン・エフェクトのような、連続するオペレーションの結果を、 少し遅延して発行されたアニメーションの集まりです。 1.2.0のバージョンでのngAnimateモジュールは、揺らめきのアニメーションをサポートします。 ng-EVENT-staggerのCSSクラスの作成し、それを基本クラスへアニメーション用のクラスとして割り当てることで、 揺らめきのエフェクトが実行されます。 揺らめきのクラスとなるスタイルのプロパティは、transition-delay、 またはanimation-delayプロパティのどちらでも可能です。 (また、もしアニメーションがトランジションとキーフレームアニメーションの両方を含む場合は、両方)

.my-animation.ng-enter {
  /* 標準のトランジションコード */
  -webkit-transition: 1s linear all;
  transition: 1s linear all;
  opacity:0;
}
.my-animation.ng-enter-stagger {
  /* それぞれのleaveの連続アニメーションが100ms遅延します
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;


  /* ここでは、揺らめきを無効にするために、これらの2つの値を
     0に設定する必要があり、CSS継承での事故を回避します
  */
  -webkit-transition-duration: 0s;
  transition-duration: 0s;
}
.my-animation.ng-enter.ng-enter-active {
  /* 標準のトランジションコード */
  opacity:1;
}

揺らめきのアニメーションは、デフォルトでngRepeat内で動作します。(CSSクラスが定義されていれば) ngRepeatの外側で、揺らめきのアニメーションを使用するには、$animate上と同じイベントの複数の呼び出しの発火によって トリガすることが可能です。 ただし、これに関する制限として、各要素は同じ親を持つことはもちろん、同じCSSのclassNameの値を持たなければなりません。 また揺らめきのアニメーションは、最後のアニメーションが実行された後、10ミリ秒以上経過するとリセットされます。

下記のコードは、提供された要素上でng-leave-staggerイベントを発行します。

var kids = parent.children();

$animate.leave(kids[0]); //stagger index=0
$animate.leave(kids[1]); //stagger index=1
$animate.leave(kids[2]); //stagger index=2
$animate.leave(kids[3]); //stagger index=3
$animate.leave(kids[4]); //stagger index=4

$timeout(function() {
  //揺らめきを自身でリセット
  $animate.leave(kids[5]); //stagger index=0
  $animate.leave(kids[6]); //stagger index=1
}, 100, false);

揺らめきのアニメーションは、現在ではCSS定義アニメーションでのみサポートされています。

JavaScript定義アニメーション

イベントでCSS3トランジション/CSS3アニメーションを使用したくない、またはCSSのトランジション/あイメーションをサポートしないブラウザ上で、 アニメーションを実行したい場合、AngularJSモジュールの内部で定義されたJavaScriptアニメーションを使用することが出来ます。

var ngModule = angular.module('YourApp', []);
ngModule.animation('.my-crazy-animation', function() {
  return {
    enter: function(element, done) {
      //ここでアニメーションを実行し、
      //アニメーションが完了したらdoneを呼び出します。
      return function(cancelled) {
        //この(任意の)関数は、アニメーションが完了、またはキャンセルした際に
        //呼び出されます。(キャンセルされると、
        //キャンセルフラグにtrueが設定されます)
      }
    }
    leave: function(element, done) { },
    move: function(element, done) { },

    //classが追加される直前に、アニメーションがトリガされます。
    beforeAddClass: function(element, className, done) { },

    //classが追加された後に、アニメーションがトリガされます。
    addClass: function(element, className, done) { },

    //classが削除される直前に、アニメーションがトリガされます。
    beforeRemoveClass: function(element, className, done) { },

    //classが削除された後に、アニメーションがトリガされます。
    removeClass: function(element, className, done) { }
  }
});

JavaScript定義のアニメーションは、CSSのようなクラスのセレクタを使用して作成され、 JavaScriptのコールバック関数を実行するためのイベントが設定されます。 アニメーションがトリガされると、$animateは要素のCSSクラス属性値に適した、それに一致するアニメーションを探し、 マッチしたアニメーションイベントの関数(もし、見つかれば)を実行します。 言い換えれば、もしアニメーションする要素上でJavaScriptアニメーションにマッチするCSSクラスが提供されていれば、 コールバック関数が実行されます。 また、単純に単一のクラスセレクタのみが許可されることに注意してください。 (複合するクラスセレクタはサポートされません)

JavaScriptアニメーションでは、様々なイベントのコールバックのアニメーション関数が含まれたオブジェクトが返されることが期待されます。 上記で説明したように、これらのコールバックはアニメーションイベントを元にトリガされます。 そのため、enterのアニメーションが実行され、JavaScriptアニメーションが見つかった場合、 enterのコールバックはそのアニメーションを扱います。 (加えて、CSSキーフレームアニメーション/トランジションのコードは、スタイルシートを経由して定義されます。)

 Back to top