吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

ngAnimateモジュールを使用したアニメーション(基本)

2013年11月27日 / category : angularjs, lab, nganimateモジュール

ngAnimateモジュールを使用したアニメーションのサンプルです。
まずは基本的なアニメーションとして、単純なフェードイン・アウトのサンプルを紹介します。
私自身、現在勉強中ですので、あやふやな箇所が出てくるかもしれませんが、、、

必要な項目として、

1.ngAnimateモジュールファイル「angular-animate.min.js」を読み込む
2.CSS3でアニメーションを作る
3.HTML側でアニメーション分岐をする

以上の3点が必要です。

【1.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です。)

【2.CSS3でアニメーションを作る】
ngAnimateモジュールでは、該当の要素のclass(id)名の後ろに属性を追加することで、アニメーションを実行します。

class(id).ng-enter : enter時のstartの値を設定

class(id).ng-enter-active : enter時のendの値を設定

class(id).ng-leave : leave時のstartの値を設定

class(id).ng-leave-active : leave時のendの値を設定

フェードイン・アウトのCSS3の例を記述すると、下記のようなCSS3となります。

.animate{
	-webkit-transition:linear 1s;
	-moz-transition:linear 1s;
	-ms-transition:linear 1s;
	-o-transition:linear 1s;
	transition:linear 1s;
}

.animate.ng-enter{
	opacity:0;
}

.animate.ng-enter-active{
	opacity:1;
}

.animate.ng-leave{
	opacity:1;
}

.animate.ng-leave-active{
	opacity:0;
}

【3.HTML側でアニメーション分岐をする】
アニメーションを設定する要素に下記の属性を指定します。

<div ng-if="isToggle"></div>

ng-if属性の値(isToggle)は任意ですが、この値が論理値(true/false)となります。
次に、先ほど用意したCSS3のアニメーションのクラスを設定します。

<div class="animate" ng-if="isToggle"></div>

これで、アニメーションする要素の用意は完了です。あとは、操作です。
ng-if属性で設定した値(isToggle)が、trueの場合は、フェードイン(enter)となり、falseの場合は、フェードアウト(leave)となります。
操作方法の例として、下記のような記述ができます。

<button ng-click="isToggle=!isToggle">Toggle Animation</button>
<button ng-click="isToggle=true">Open Animation</button>
<button ng-click="isToggle=false">Close Animation</button>

isToggle=!isToggle
isToggleの値がtrueの場合は、falseにする。 → leaveの状態になる → フェードアウト
isToggleの値がfalseの場合は、trueにする。 → enterの状態になる → フェードイン

isToggle=true
isToggleの値を、trueにする。 → enterの状態になる → フェードイン

isToggle=false
isToggleの値を、falseにする。 → leaveの状態になる → フェードアウト

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

■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/6/
■サンプルファイル一式
ダウンロード – zip
■HTML – index.html
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<link href="css/reset.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>

<div id="container">

<div id="btns">
<button ng-click="isToggle=!isToggle">Toggle Animation</button>
<button ng-click="isToggle=true">Open Animation</button>
<button ng-click="isToggle=false">Close Animation</button>
</div>

<div id="contents">
<div id="box" class="animate" ng-if="isToggle"></div>
</div>

</div>

</body>
</html>
■CSS – styles.css
.animate{
	-webkit-transition:linear 1s;
	-moz-transition:linear 1s;
	-ms-transition:linear 1s;
	-o-transition:linear 1s;
	transition:linear 1s;
}

.animate.ng-enter{
	opacity:0;
}

.animate.ng-enter-active{
	opacity:1;
}

.animate.ng-leave{
	opacity:1;
}

.animate.ng-leave-active{
	opacity:0;
}
■JavaScript – app.js
var myApp = angular.module('app', ['ngAnimate']);