Angular.jsのngAnimateについての簡単なデモと1.2.0

angular.js

Angular.jsの1.2.0がリリースされましたね！
stableのバージョンも1.0.8から一気に1.2.0になってかなり大きなアップデートという感じです。



1.2.0や今後についてはこのビデオを見るといいかもしれません。（1時間ちょっとあるので長いですが...）

1.2.0

  • 例えばngRepeatにはいくつか機能拡張されていて、要素を超えて繰り返し出来るようになったりしています。
<div ng-repeat-start="element in list">{{element}}</div>
<div>{{element}}</div>
<div ng-repeat-end>{{element}}
  • 他にも$http、$resource周りの拡張や、"Controller as xxx"でcontrollerのインスタンスをtemplateから参照できたり、ng-ifでのtemplateの出し分け、expressionで三項演算子(a ? b : c)が使えるようになったり(地味に嬉しい)、CSPへの対応などのセキュリティ周り、エラーメッセージの改善やドキュメントの改善など、機会があれば色々試して紹介したいと思います。
  • あと、モバイル対応として、ngTouchをモジュールを使うことでon-clickがスマートフォン端末でもtouchイベントで動くようになっているのも嬉しいところです。(ngSwipeも)
  • また、ngRouteがコアから外れていたり今後はAngular.jsのコアをどんどん小さくして外に出していくみたいですね。
  • 1.0.X系から1.2.0に移行する場合はここを見て対応するといいみたいです。

ngAnimate

ざっくり
  • http://docs.angularjs.org/api/ngAnimate
  • ngAnimateは1.14から入った機能でどんなものか簡単に言うと、Angular.jsでの状態の変化に対応するCSSを定義するだけでアニメーションさせることが出来るというものです。
    • ngView、ngRepeat、ngClass、ngShow、ngHide、ngInclude、ngSwitch、ngIfでの状態の変化に指定することが出来ます。
  • Angular.jsはngAnimateが入る前から、DOMのclassをngClassなどで変更することでアニメーションさせるように作られていたのかなと思うのですが、それがさらに簡単に出来るようになった感じです。
  • Angular.jsのサイトも明らかにngAnimate使ってページ遷移時にアニメーションつけたりしてますね。
簡単なサンプル

ngViewによる画面遷移時にアニメーション (Move to Page)
  • ngViewを指定しているDOM(.view)にng-enterとng-enter-activeを定義しておくことで、ng-enter、ng-enter-activeとCSSのクラスが変化して、この場合画面遷移時に透過が0から1に変化するようになります。
/* scss */
.view {
  &.ng-enter {
    @include transition-duration(1s);
    @include transition-timing-function(linear);
    opacity: 0;
  }
  &.ng-enter-active {
    opacity: 1;
  }
}
ngRepeatの追加、削除時にアニメーション (Add, Delete)
  • ngRepeatを指定しているDOM(.view)にng-enterとng-enter-active、ng-leave、ng-leave-activeを定義しておくことでngRepeatの要素に追加、削除されたときにアニメーションさせることが出来ます。
/* scss */
.list-group-item {
  position: relative;
  &.ng-enter {
    @include transition-duration(0.5s);
    @include transition-timing-function(linear);
    top: -100px;
    opacity: 0;
  }
  &.ng-enter-active {
    top: 0px;
    opacity: 1;
  }
  &.ng-leave {
    @include transition-duration(0.5s);
    @include transition-timing-function(linear);
    top: 0px;
    opacity: 1;
  }
  &.ng-leave-active {
    top: -100px;
    opacity: 0.5;
  }
}
  • タイムラインで新しいのが追加される時のアニメーションなんかはこれだけでできそうです。
アニメーションを遅延 (Multi Add)
  • ng-xxxx-staggerを指定することでアニメーションを遅延させることが出来ます。
  &.ng-enter-stagger {
    @include transition-delay(0.5s);
    @include transition-duration(0);
  }
JavaScriptで指定
  • CSSのクラスでなくて、コードでアニメーションを書くことも出来ます。
@myapp.animation '.view', ->
  return {
    enter: (element, done) ->
      console.log "enter"
      done()
    leave: (element, done) ->
      console.log "leave"
      done()
  }

ngAnimateを使うことで、簡単なアニメーションならcssを書くだけで作れるので便利そうですね！

参考

おまけ

  • 昔書いた資料で1.0.7の時なので今だと古い内容も多いですが、実際にアプリ作ってみたときの話が書いてあるのでよければ見てみてください。


最近は、Angular.jsの情報が日本語でも得られるようになってきて嬉しいです