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

ngAnimateモジュールを使用したアニメーション(ng-class指定)

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

ngAnimateモジュールの情報がなかなか見つからず、大変です。。。
以前に、基本編としてクラス名に「ng-enter」「ng-enter-active」「ng-leave」「ng-leave-active」を加えて、アニメーションを実装しましたが、ng-class属性を使用したクラス名変更でも実装できるようです。
その方法をまとめます。

基本編の記事
http://tsudoi.org/weblog/?p=2015

手順としては、以前の基本編と同じです。

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

【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でアニメーションを作る】
該当の要素のclass(id)名の後ろに属性を追加することで、アニメーションを実行します。

class(id)-add : add時のstartの値を設定

class(id)-add-active : add時のendの値を設定

class(id)-remove : remove時のstartの値を設定

class(id)-remove-active : remove時のendの値を設定

また、addが完了した後は、class(id)のみがクラス名に残ります。
removeが完了した後は、class(id)が残りません。

アニメーションCSS3の例を記述します。

.animate{
	width:640px;
	height:480px;
	opacity:1;
	background:#cc285f;
}

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

.animate-add-active{
	width:640px;
	height:480px;
	opacity:1;
}

.animate-remove-active{
	width:0;
	height:0;
	opacity:0;
}

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

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

ng-class属性の値(animateCss)は任意です。
次に、先ほど用意したCSS3のアニメーションのクラスを操作ボタンをクリックすることで実行されるようにします。

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

ボタン「Open Animation」をクリックした場合
ng-class属性の値「animateCss」に、「animate」のクラス名が代入され、アニメーションが開始されます。
→ クラス名「animate-add」が設定される
→ クラス名「animate-add-active」が設定され、アニメーションが開始
→ アニメーションが完了後、クラス名「animate」だけが残る

ボタン「Close Animation」をクリックした場合
ng-class属性の値「animateCss」のクラスが削除され、アニメーションが開始されます。
→ クラス名「animate-remove」が設定される
→ クラス名「animate-remove-active」が設定され、アニメーションが開始
→ アニメーションが完了後、クラス名が削除される

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

■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/8/
■サンプルファイル一式
ダウンロード – 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="animateCss='animate'">Open Animation</button>
<button ng-click="animateCss=''">Close Animation</button>
</div>

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

</div>

</body>
</html>
■CSS – styles.css
.animate{
	width:640px;
	height:480px;
	opacity:1;
	background:#cc285f;
}

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

.animate-add-active{
	width:640px;
	height:480px;
	opacity:1;
}

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