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

ngAnimateモジュールを使用したアニメーション – 外部HTMLの切り替え(ng-view)

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

ngAnimateモジュールを使用したアニメーション、
続いては、ng-view属性による外部HTMLの切り替え時にコンテンツをフェードイン・アウトを実行するサンプルです。

ng-view属性による外部HTMLの切り替えのサンプルは、「外部HTMLの読み込み、controller指定とcontrollerAs指定の違い」で作成しましたので、このサンプルを流用します。

■流用するサンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/4_1/
■流用するサンプルファイル一式
ダウンロード – zip

このサンプルに、外部HTMLの切り替え時のフェードイン・アウトを追加します。
まず、ngAnimateモジュールを追加し、読み込みます。

■HTML – index.html
<script src="js/libs/jquery-2.0.3.min.js"></script>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/libs/angular-animate.min.js"></script>
■JavaScript – app.js
var myApp = angular.module('app', ['ngRoute','ngAnimate']);

続いてアニメーションのCSS3を追加します。

■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;
}

アニメーションを対応させる要素にクラス(.animate)を追加します。

■HTML – index.html
<div class="animate" ng-view></div>

この状態で、機能的には完了です。
ただ、レイアウト的にはNGですので、CSSでレイアウトを整えます。

外部HTMLが切り替わる際、ブロック要素となるため、外部HTML同士が重ならず、2段になって表示される。
そのため、親要素にposition:relative、子要素(外部HTML)にposition:absoluteを追加し、レイアウトを整える。
レイアウト調整のCSSに関しては、解説を省略します。

レイアウト調整後のサンプルが下記となります。

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

<div id="container" ng-controller="MainCtrl">

<p>ページ切り替え : <a href="#/photo0/">赤いかぼちゃ</a> | <a href="#/photo1/">黄色いかぼちゃ</a></p>
<div id="viewBox">
<div class="view animate" ng-view></div>
</div>
<p>root msg : {{msg}}</p>

</div>

</body>
</html>
■HTML – templateA.html
<div id="templateA" ng-controller="CtrlA">
<p><img src="images/photo0.jpg" width="640" height="427" alt=""></p>
<p>view msg : {{msg}}</p>
</div>
■HTML – templateB.html
<div id="templateB" ng-controller="CtrlB">
<p><img src="images/photo1.jpg" width="640" height="427" alt=""></p>
<p>view msg : {{msg}}</p>
</div>
■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', ['ngRoute','ngAnimate']);

myApp.config(['$routeProvider',
	function($routeProvider){
		$routeProvider.when('/photo0/', {
			templateUrl: 'templateA.html',
			controllerAs: 'CtrlA'
		});
		$routeProvider.when('/photo1/', {
			templateUrl: 'templateB.html',
			controllerAs: 'CtrlB'
		});
		$routeProvider.otherwise({
			redirectTo: '/photo0/'
		});
	}
]);
■JavaScript – controllers.js
myApp.controller('MainCtrl', ['$scope', function($scope){
	$scope.msg = 'html = index.html, ng-controller = MainCtrl';
}]);

myApp.controller('CtrlA', ['$scope', function($scope){
	$scope.msg = 'html = templateA.html, ng-controller = CtrlA';
}]);

myApp.controller('CtrlB', ['$scope', function($scope){
	$scope.msg = 'html = templateB.html, ng-controller = CtrlB';
}]);