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

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

この記事のシェア数

451

先生
先生 最高技術責任者 / 林 優一

CTOの林です。フロントエンドを専門とし、AngularJSのコミュニティをはじめ、様々な勉強会に顔を出しています。効率化マニアでGrunt,Gulpをはじめ、プロジェクト進行やサーバーサイド、インフラ周りの効率化を目指し日々活動しています。 【役職紹介 / CTO】 Web制作にかかる内容を統括しています。プロジェクトを横断的に見渡し、技術的な見地からアドバイスなどを行い、ときには実制作のヘルプを行ったりしています。新人エンジニアの育成や、体外的な活動としてLIG全体のエンジニアのブランディングのため勉強会やイベントへの登壇・開催なども行っています。 【普段やっていること】 新規サービスの設計(UI,遷移,DB,APIなど)、エンジニアの育成及び環境整備、技術選定、Web制作ユニットの統括とプロジェクト進行を円滑にするための仕組みづくり、フロントエンド周りの実装、エンジニアリングの開発効率化、勉強会の登壇・主催など