1分でわかるAngularJSのngAnimateのngShowの使い方

ngAnimateを使うには

まずangular.jsとangular-animate.jsを読み込む。

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js

HTMLコードを記述

ボタンを押すたびに赤いボックスがアニメーションで表示・非表示を切り替えるサンプルを作成するのでまずは下記のHTMLコードを記述。

<div ng-app="app" ng-controller="Ctrl">
  <button ng-click="toggle()">表示・非表示</button>
  <div class="box" ng-show="flag"></div>
</div>

JavaScriptコードを記述

angular.module("app", ["ngAnimate"])でAnimateモジュール導入。

表示・非表示のために$scope.flag = true;を記述。これがfalseのときは非表示。$scope.flag = !$scope.flag;と記述することでクリックするたびにtrue -> false -> true -> false と切り替わる。

var app = angular.module("app", ["ngAnimate"]);
app.controller('Ctrl', function ($scope) {
  $scope.flag = true;
  $scope.toggle = function() {
    $scope.flag = !$scope.flag;
  };
});

CSSコードを記述

Animateモジュールが導入されていればng-show(またはng-hide)の真偽値が変更されたときにCSSクラスが追加される。アニメーションはこの追加されるCSSクラスを利用して実装する。

追加されるCSSクラスは以下の通り。

/* 非表示開始 */
.ng-hide-add {
  transition: 1s;
  opacity: 1;
}

/* 非表示終了 */
.ng-hide-add-active {
  opacity: 0;
}

/* 表示開始 */
.ng-hide-remove {
  transition: 1s;
  opacity: 0;
}

/* 表示終了 */
.ng-hide-remove-active {
  opacity: 1;
}

CSSのコメントにも書いたがそれぞれ非表示開始時、非表示終了時、表示開始時、表示終了時のCSSクラスになっている。

例えばng-showがtrueからfalseになるときは.ng-hide-add、.ng-hide-add-activeが付き、ng-showがfalseからtrueになるときは.ng-hide-remove、.ng-hide-remove-activeが付く。(.ng-○○-activeは一瞬遅れて追加されるため、これを利用してアニメーションを実装する)

AngularJSのngAnimateのngShowのサンプル