web-dev-qa-db-ja.com

Angularマテリアルデザインアニメーション

私は現在、AngularJS、ngAnimate、Angular-Material、UI-Routerを使用してモバイルWebアプリケーションを開発しています。 UI/UXパーツのGoogleマテリアルデザインの仕様に従っています。

状態の変化をアニメーション化したい 'Angular way'、特にこれ 'Parent to child'アニメーション

この「リフト＆エキスパンド」アニメーションを実現する方法がわかりません。

ご協力いただきありがとうございます ！

angularjsangular-ui-routercss-transitionsng-animateangular-material
11
thibaut

あなたは自分でそれをしなければならないと思います。

Angular-materialは、マテリアルデザインのアニメーションガイドラインを複製する魔法の杖ではありません。マテリアルデザインのガイドラインは単なるガイドラインであり、ハッキングされるほど緩いものです。GoogleのAndroidアプリの場合は（社内かどうかにかかわらず）厳密に守られています。
私の気持ちは、angularマテリアルチームがすでにマニアックのようにこの素晴らしいツールを1.0にすることを推進しており、 Angular 2の新しいルーティングシステムを利用する 箱から出して実現したいようなアニメーションを提供します。しかし、それは ブリーディングエッジのブリーディングエッジ 、少なくとも当面はです。良いニュースは、ルートに独自のビューポートと兄弟ビューポートがあることです。

AngularJSは、PolymerのWebコンポーネントの概念をある程度取り入れ始めています。 「魔法を見せて！」までスクロールします。 このページ 、および これらのデモを確認 。 Polymerのエコシステムは、多くの アプリを構築するための既製のコンポーネント を提供します。かなり大きいので、なぜPolymerが取得されないのか不思議に思うでしょう AngularJSと同じ勢い 。しかし、私は余談します...

オプション1

  1. クリック/タップされているリスト要素でトリガーされるカスタムメイドの関数を作成して、コントローラー（またはディレクティブ）に配置します。

  2. ユーザーがリスト要素をクリック/タップすると、関数がトリガーされます（コンソールテスト）。

  3. 関数は：

    • クリック/タップされたアイテムのIDを取得します（関数に渡します）
    • animate：ここにはいくつかの選択肢がありますが、ここに1つあります： i-router絶対名付きview （@ view_name）を使用し、overflow：hiddenを含むdivコンテナーにラップします。これは、に対応する初期次元を持ちます。リストアイテムの寸法。
    • クリックされたリスト要素のxy位置を検出し（ 例 、jQueryでAngularJSを使用すると仮定）、それを「アイテム詳細」ルート（上記を参照）に渡すので、長方形UIがクリック/タップの瞬間である場所に正確に対応する原点で成長します。ビデオに示されているアニメーションはかなり複雑に見えます。下部のアイテムをクリックすると、「アイテムの詳細ページ」の成長が遅くなり、上部が速くなります。

なぜ絶対的な名前付きビューなのですか？これにより、zインデックスを使用して、リストを「アイテムの詳細」ビューの下に表示できるため、ユーザーがリストを閉じたり離れたりすると、アニメーションをロールバックでき、長方形が正確な寸法に縮小され、リストアイテムの位置。最後に、opacity：0を遷移し、ルートを離れます。

オプション2

これは、イオンアイテムをストレッチ/スクロールするテクニックの大まかなモックアップです。アイテムの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回目しか機能しません。しかし、コンセプトはこのようなものかもしれません。

7
Christian Bonato