こんにちは。
6月から役職が変わりフロントエンドリーダーからCTOになりました、先生です。
もうAngular1.4にアップデートしましたか？ Angular1.4になりマテリアルデザインを意識したアニメーション関連の変更や実装がおこなわれました。その分Breaking Changesもあるのでアップデートには注意する必要があります。
今日はそんなAngularJS 1.4を使って、マテリアルデザイン風にページ遷移するアニメーションを作ってみたいと思います。
目次
今回のデモ
デモは下記リンクになります。
各メンバーをクリックするとスムーズにアニメーションして詳細ページに遷移します。まずは触ってみてください。
http://frontainer.com/ligblog-sample/angular-morphing-animation/#/
必要なもの
- AngularJS1.4 – https://github.com/angular/angular.js
- Angular Animate 1.4 – https://github.com/angular/bower-angular-animate
- UI Router 0.2.15 – https://github.com/angular-ui/ui-router
- Materialize 0.96.1 – http://materializecss.com/
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
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
