NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2015.06.23

AngularJSでマテリアルデザイン風のページ遷移アニメーションを作ろう

先生

こんにちは。
6月から役職が変わりフロントエンドリーダーからCTOになりました、先生です。

もうAngular1.4にアップデートしましたか? Angular1.4になりマテリアルデザインを意識したアニメーション関連の変更や実装がおこなわれました。その分Breaking Changesもあるのでアップデートには注意する必要があります。

今日はそんなAngularJS 1.4を使って、マテリアルデザイン風にページ遷移するアニメーションを作ってみたいと思います。

今回のデモ

デモは下記リンクになります。
各メンバーをクリックするとスムーズにアニメーションして詳細ページに遷移します。まずは触ってみてください。
http://frontainer.com/ligblog-sample/angular-morphing-animation/#/

必要なもの

Angular Routerでも機能しますが、今回はよく使われているUI Routerを使用します。
また、Materializeは見た目をマテリアルデザイン風にしてくれるフレームワークで、今回はスタイルだけを使用します。

Animation Anchoring

Angular Animate1.4でAnimation Anchoringという機能が追加されました。
これを使うことで、遷移前と後の同じ要素をアニメーションさせながら画面を切り替えることができます。
使い方は簡単で、紐付けたい要素に同じ値のng-animate-ref属性を付け、CSSでtransitionを設定してあげるだけです。

<!-- ページA -->
<span class="page-a dummy" ng-animate-ref="hoge">dummy text</span>

<!-- ページB -->
<span class="page-b dummy" ng-animate-ref="hoge">dummy text</span>

<!-- css -->
}
.dummy-anchor-in {
    transition: 0.5s ease-out all;
}

Angular記法で変数を指定してもOKです。

<span class="page-a dummy" ng-animate-ref="{{myValue}}">dummy text</span>

ng-animate-refに関しては、下記の公式ページに記載があります。
https://docs.angularjs.org/api/ngAnimate#animation-anchoring-via-ng-animate-ref-

デモと同じものを作ってみよう

デモのコードはGithubで公開していますので、そちらもご覧ください。
https://github.com/frontainer/ligblog-sample/tree/master/angular-morphing-animation

構成

構成は下図のとおり。

index.html  
home.html  
profile.html
┣ css/  
┃ ┗ style.css  
┣ js/  
┃ ┗ app.js  
┗ images/  
    ┗ *.jpg