AngularJSで共有要素を実装する

Question

私はAngularJSでPhoneGap/Cordovaアプリケーションを開発しています。私のターゲットプラットフォームはAndroidなので、私はアクティビティ遷移のためのさまざまなアプローチを検討しました。言い換えると;ネイティブで直感的なユーザーエクスペリエンスを提供しながら、フォームAとフォームB間の移行をアニメーション化する方法。

私のアプリケーションはマテリアルデザインのガイドラインを実装する予定で、ほとんどのアプリケーションフローでは完全に動作すると思う「shared element transition」というトランジションアニメーションを見つけました。

I実際に本当にこのアプローチのように、可能とアプリケーション間で使いやすいほど汎用的で柔軟性のある角1.5に基づいて実装を達成するためにどのように疑問を抱きました。

私はまだAngularJSが新しくなっていますので、shared element transitionの行に沿って何かを実装するためのきちんとした方法を探したり、すでに存在する実装を指摘したりしたいと思います。

私は、Angular 1.5とMaterializeCSSを使用してアプリを強化しています。どうもありがとうございました！

Answer 1

このチュートリアル（使用準備ができているコンポーネントも参照）をチェックすると、さまざまなビュー間でヒーロー要素をアニメーション化し、適切なルートを維持します。要約する

http://blog.scottlogic.com/2014/12/19/angular-hero-transitions.html

、主人公要素が移行されている2つのビューの間に存在しなければなりません。遷移するとき、ヒーロー要素は、位置アニメーションが終了するまでターゲットビューに一時的に隠されます。ターゲットビューが直接ロードされている場合（リフレッシュ、ブックマーク）、アニメーションは実行されず、ヒーロー要素がそこにあります。