スライドの動きやフリック時の画面遷移、昔アニメーションといえばゲームなイメージでしたが、モバイル端末が登場して以来結構身近なものになりました。
ただ、身近だから簡単というわけでもなく、動作にアニメーションをつけるのは結構面倒。「これちょっとさ、下からひゅっと出てくる感じにしてよ」と言われてそんな簡単じゃないんだよとイラッとすることもあるだろう。
「アニメーションはもうデザインみたいなもんだし、CSSで書いてよろしくやってくれたらな・・・」とJQueryで実装しながら見るはかない夢・・・を現実にしてしまうのが、Angular.jsのng-Animateなのであります！
準備
アニメーションを使用するには、angular.js本体意外にangular-animate.jsが必要となります。Googleがホスティングしてくださっているので、ありがたく使わせていただきましょう。
Google Hosted Library
//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular.min.js
//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js
X.Y.Zはバージョン番号になります。これらをロードした上で、以下宣言をしておけばOK。
angular.module('app', ['ngAnimate']); //Animateモジュールの導入
CSS定義
以下のようにCSSクラスの定義を行います。
.demo.ng-enter { } /* enter 処理の開始値 */
.demo.ng-enter-active { } /* enter 処理の終了値 */
.demo.ng-leave { } /* leave 処理の開始値 */
.demo.ng-leave-active { } /* leave 処理の終了値 */
アニメーション実装はCSS3のtransitionなので、ブラウザが対応していないと動かない点には注意(業務で使用しているのはIE？それは残念だ)。
以下のようにアニメーションさせたいDOMにクラス(この場合demo)を指定することで動作させることができます。実際のCSS3定義より簡単。
<div ng-view class="demo">Animate!</div>
なお、1.2.5の段階ではアニメーションが使用可能なdirectiveは以下のようになっています。
| 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) |
実践
実際作成してみたのがこちら。Animationに必要ないコードはなるべく省きました。
作ってみて気づいた点など。
- アニメーションで使用できる種類(linear/ease-inなど)は、CSS3のtransitionに準拠しています→参考
- add/removeなど、要素の追加/削除にのみ反応するようで、単純に表示/非表示が切り替わる際は反応しない
- どんなanimationにしようかな、と思ったときはパワポのアニメーションとかが参考になる。実装はこちらに色々なサンプルがあるのでご参考。
最後に、公式ドキュメントはこちら。