CSSとアニメーションの設定
最後にCSSを作りアニメーションの設定をおこないます。
.view-container {
position: relative;
}
.view.ng-animate {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 500px;
}
.view.ng-enter, .view.ng-leave {
transition: 0.5s cubic-bezier(.55,0,.1,1) all;
}
.view.ng-enter {
opacity: 0;
}
.view.ng-enter.ng-enter-active, .view.ng-leave {
opacity: 1;
}
.view.ng-leave.ng-leave-active {
opacity: 0;
}
.name.ng-anchor-in, .thumb.ng-anchor-in,.shadow.ng-anchor-in {
transition: 0.5s cubic-bezier(.55,0,.1,1) all;
}
.profile.shadow {
padding: 20px;
}
.profile.name {
font-size: 24px;
font-weight: bold;
}
.profile-container {
padding: 20px;
margin: 20px;
}.view関連はページ遷移をフェードで切り替えるためのものです。
ng-anchor-inというのが記述に追加されています。ここにtransitionの設定を記述します。
1.3で同様のアニメーションを実装する方法
こうして作ったのが先ほどのデモになります。
このように遷移前と後のng-animate-refにつけた名称と一致するものが、アニメーションして切り替わるようになります。複雑そうに見えるアニメーションが簡単に実装できてしまいました。
http://frontainer.com/ligblog-sample/angular-morphing-animation/#/
諸事情により1.4に上げるのが難しい場合は「Angular-Hero」というモジュールがあります。これを使うと1.3でも同様のアニメーションを実装することができます。
Angular-Heroは1.4だとページ遷移のアニメーションが動作しなかったため、修正したものをプルリクエストしマージされています。そのため、1.3で作った後に1.4にあげても変わらず動作するようになりました。（バージョン0.0.7）
ハマりどころ
app.jsを非同期読み込みにするためにasync属性を付けてangular.bootstrapで初期化していると、ng-animate-refによるアニメーションが正しく動作しませんでした。
JSエラーが出て動作しないなぁと思ったら下記を確認してみてください。（これは本当にわからなかった）
- うまく動作しなかった例
-
HTML
<script src="app.js" async></script>app.js
angular.bootstrap(document, ["app"], { strictDi: true });
最後に
Angular Animate1.4はBreaking Changesがあるので、1.3でアニメーションをガンガン使っている場合にはアップデートに注意が必要です。
しかし、1.4はパフォーマンスの改善だけでなくアニメーションについても強力で魅力的なものになっているので、制限がなければバージョンアップしてみてはいかがでしょうか。
【関連リンク】
AngularJS ui-routerを使って認証機能を実装してみよう
いなば
AngularJSのngResourceモジュールをRestangularに置き換えてみた
いなば
AngularJSのOne-time Bindingを使ってパフォーマンス改善をしよう
先生
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
