angular本体を読み込んだ後にangular-animateを読み込む。
<script src="angular.js"></script> <script src="angular-animate.js"></script>
コアモジュールに読み込ませる。
var app = angular.module('app', [
'ngAnimate'
]);
これで特定のディレクティブにアニメーション用のクラスが自動的に振られるようになるので、それをCSSで制御してあげればOK。
angular1.2.5で有効なディレクティブとアニメーションは下記の通り。
| Directive | Supported Animations |
| ngRepeat | enter, leave and move |
| ngView | enter and leave |
| ngInclude | enter and leave |
| ngSwitch | enter and leave |
| ngIf | enter and leave |
| ngClass | add and remove |
| ngShow & ngHide | add and remove (the ng-hide class value) |
下記例。
■HTML
<div ng-view class="hoge"></div>
■CSS
/* enter 処理の開始値 */
.hoge.ng-enter {}
/* enter 処理の終了値 */
.hoge.ng-enter-active {}
/* leave 処理の開始値 */
.hoge.ng-leave {}
/* leave 処理の終了値 */
.hoge.ng-leave-active {}
Animate.cssと併せて用いるとベスト。