私は現在、AngularJS、ngAnimate、Angular-Material、UI-Routerを使用してモバイルWebアプリケーションを開発しています。 UI/UXパーツのGoogleマテリアルデザインの仕様に従っています。
状態の変化をアニメーション化したい 'Angular way'、特にこれ 'Parent to child'アニメーション
この「リフト&エキスパンド」アニメーションを実現する方法がわかりません。
ご協力いただきありがとうございます !
あなたは自分でそれをしなければならないと思います。
Angular-materialは、マテリアルデザインのアニメーションガイドラインを複製する魔法の杖ではありません。マテリアルデザインのガイドラインは単なるガイドラインであり、ハッキングされるほど緩いものです。GoogleのAndroidアプリの場合は(社内かどうかにかかわらず)厳密に守られています。
私の気持ちは、angularマテリアルチームがすでにマニアックのようにこの素晴らしいツールを1.0にすることを推進しており、 Angular 2の新しいルーティングシステムを利用する 箱から出して実現したいようなアニメーションを提供します。しかし、それは ブリーディングエッジのブリーディングエッジ 、少なくとも当面はです。良いニュースは、ルートに独自のビューポートと兄弟ビューポートがあることです。
AngularJSは、PolymerのWebコンポーネントの概念をある程度取り入れ始めています。 「魔法を見せて!」までスクロールします。 このページ 、および これらのデモを確認 。 Polymerのエコシステムは、多くの アプリを構築するための既製のコンポーネント を提供します。かなり大きいので、なぜPolymerが取得されないのか不思議に思うでしょう AngularJSと同じ勢い 。しかし、私は余談します...
クリック/タップされているリスト要素でトリガーされるカスタムメイドの関数を作成して、コントローラー(またはディレクティブ)に配置します。
ユーザーがリスト要素をクリック/タップすると、関数がトリガーされます(コンソールテスト)。
関数は:
なぜ絶対的な名前付きビューなのですか?これにより、zインデックスを使用して、リストを「アイテムの詳細」ビューの下に表示できるため、ユーザーがリストを閉じたり離れたりすると、アニメーションをロールバックでき、長方形が正確な寸法に縮小され、リストアイテムの位置。最後に、opacity:0を遷移し、ルートを離れます。
これは、イオンアイテムをストレッチ/スクロールするテクニックの大まかなモックアップです。アイテムのy位置を検出し、 ionicScrollDelegate を使用してアイテムまでスクロールする必要があります。また、メインスクロールをフリーズして、ユーザーが「詳細ビュー」を閉じてスクロールを解放するまで「スタック」するようにします。
$scope.toggleStretchedMode = function(itemID) {
$scope.stretched = $scope.stretched === false ? true: false;
if(!$scope.stretched){
$('ion-item').removeClass('stretched');
$ionicScrollDelegate.freezeAllScrolls(false);
}
else
{
$location.hash(itemID);
$ionicScrollDelegate.$getByHandle('mainScroll').anchorScroll(true);
$ionicScrollDelegate.freezeAllScrolls(true);
$('#'+itemID).addClass('stretched');
};
}
非常に基本的なJSFiddle、洗練する必要があります(クリックしたアイテムは画面の中央までスクロールしてから展開する必要があります) 。
JSFiddleはマウスホイールのスクロールのみをブロックすることに注意してください。最初のスワイプをブロックしているように見えても、ng-clickがそれを解放する場合は、完全にはほど遠いです。リストのスクロールだけでなく、上下のスワイプイベントもブロックする必要があります。
また、それはひどく初期化され、2回目しか機能しません。しかし、コンセプトはこのようなものかもしれません。