【BiTT】俺のクローン作るしかなくね!?
【BiTT】俺のクローン作るしかなくね!?
2015.06.23

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

先生

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はパフォーマンスの改善だけでなくアニメーションについても強力で魅力的なものになっているので、制限がなければバージョンアップしてみてはいかがでしょうか。

 

【関連リンク】