【1.jQueryを読み込む】

<script src="js/libs/jquery-2.0.3.min.js"></script>
<script src="js/libs/jquery.easing.1.3.js"></script>

jQueryを読み込みます。
また、今回はjQueryのライブラリ「jquery.easing」を使用することにするので、ライブラリファイルも一緒に読み込みます。

【2.ngAnimateモジュールファイル「angular-animate.min.js」を読み込む】

AngularJS公式サイトからダウンロードしたファイル一式の中に、「angular-animate.min.js」が格納されていますので、
まずjsファイルを読み込みます。

<script src="js/libs/angular-animate.min.js"></script>

このモジュールを読み込むには、

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

と指定します。（モジュール名がngAnimateです。）

【3.AngularJSのanimation関数を使用して、アニメーションを設定する】

animation関数の使用方法が正直あやふやな感じですが、下記のような使い方だと思っています。

myApp.animation('アニメーション対象となるクラス名', function(){
	return {
    		//アニメーション設定処理
    	}
});

「アニメーション設定処理」には、どういうタイミングでアニメーションを実行させるか、という設定を記述するのですが、その分岐の種類は下記の公式サイトを参考にしていただければと思います。
→ $animate
この中で、今回のサンプルでは、addClassメソッド、removeClassメソッドを使用します。
addClass → クラスが追加されたタイミングでアニメーションを実行する
removeClass → クラスが削除されたタイミングでアニメーションを実行する
animation関数の記述は下記のようになります。

myApp.animation('アニメーション対象となるクラス名', function(){
	return {

    		//クラスが追加されたタイミング
		addClass: function(element, className, done){
			//アニメーション実行処理
		},

        	//クラスが削除されたタイミング
		removeClass: function(element, className, done){
			//アニメーション実行処理
		}

	}
});

addClassメソッド、removeClassメソッドの引数はそれぞれ
element → アニメーションの対象となるjQueryのelement要素
className → アニメーションの対象となるクラス名
done → アニメーション終了後のコールバック関数（これの使い方がわかっていません、、、）
となります。

次に「アニメーション実行処理」に今回は、jQueryのライブラリ「jquery.easing」を使用したアニメーションを記述していきます。

myApp.animation('アニメーション対象となるクラス名', function(){
	return {
		addClass: function(element, className, done){
			$(element).animate({'width':640, 'height':480, 'opacity':1}, 1000, 'easeInOutQuint');
		},
		removeClass: function(element, className, done){
			$(element).animate({'width':0, 'height':0, 'opacity':0}, 1000, 'easeOutQuint');
		}
	}
});

jQueryの記述の説明は割愛します。
これで、クラスが追加されたタイミング（addClass）、クラスが削除されたタイミング（removeClass）でアニメーションがそれぞれ実行されるようになります。

【4.HTML側でアニメーション分岐を設定する】

アニメーションを設定する要素に下記の属性を指定します。

<div ng-class="animateCss"></div>

ng-class属性の値（animateCss）は任意です。
次に、先ほど設定したanimation関数のアニメーションを操作ボタンをクリックすることで実行されるようにします。

<button ng-click="animateCss='animate'">Open Animation</button>
<button ng-click="animateCss=''">Close Animation</button>

ボタン「Open Animation」をクリックした場合
ng-class属性の値「animateCss」に、「animate」のクラス名が代入され、アニメーションが開始されます。
→ クラス名「animate」が追加される
→ animation関数で設定したaddClassメソッド内のアニメーションが実行される

ボタン「Close Animation」をクリックした場合
ng-class属性の値「animateCss」のクラスが削除され、アニメーションが開始されます。
→ クラス名「animate」が削除される
→ animation関数で設定したremoveClassメソッド内のアニメーションが実行される

これですべての準備が完了しました。
サンプルを確認しましょう。