リストからカードへの角度素材デザインのアニメーション

Question

ng-repeatを使用してレンダリングされた「シンプル」カードのリストがある場合は、 これらのカードの詳細ビューへの移行を推奨する方法はありますか？

このような移行は、同じHTML/DOM要素が画面上にとどまる必要があり、コンテンツを変更する必要があることを意味しますか？

このような移行は、ng-repeatが基づいているコレクションが、私たちが移行している単一のアイテムのみを含むように変更する必要があることを意味しますか、または残りのアイテムのレンダリングには、 ng-if="item.id=focused_item_id"？

Answer 1

問題のDOM要素でCSSトランジションを使用して説明したことがありました。私は要素のリストを持っています。一つの要素をクリックすると、バッキングオブジェクトには 'expand'プロパティがtrueに設定され、余分なコンテンツが表示され、サイズが調整されます。

HTML

<div ng-repeat="el in elems" ng-class="{expand: el.expand}" class="element"> 
    <div ng-click="el.expand = !el.expand">Summary</div> 
    <div ng-if="el.expand">Details</div> 
</div> 

CSS

div.element { 
    transition: 0.5s linear all; 
    height: 200px;  
} 
div.element.expand { 
    height: 500px; 
} 

それはする必要はありませんplunkrに '概要1' または '概要2' に

https://plnkr.co/cDkuNjTbE83L5bDJccsJ

Answer 2

をクリックしてみてください同じDOM要素になり、間違いないはずです。幅や高さをアニメートすると、再ペイント/リフローが発生し、パフォーマンスが大幅に低下します。

ng-animate（https://docs.angularjs.org/api/ngAnimate）をクリックすると、クリックされたオブジェクトの関連情報が入力される単一の詳細要素が使用できます。このような

何か：

HTML

<div class="item" ng-repeat="el in elems track by $index" ng-click="getDetails(el)"> 
    <div>Summary</div> 
</div> 
<div class="details" ng-if="showDetails"> 
    <div>Details for {{currentItem}}</div> 
</div> 

CSS

.details { 
    position: fixed; 
    width: 100%; 
    transition: all 1s ease-out; 
} 
.details.ng-enter, 
.details.ng-leave-active { 
    opacity: 0; 
    transform: scale(0.8); 
} 
.details.ng-enter-active, 
.details.ng-leave { 
    opacity: 1; 
    transform: scale(1); 
} 

のでgetDetails()その後、あなたは閉じるボタンを持っている可能性が$scope.showDetails = true;を設定し、$scope.currentItem = el;を設定するような何かをするだろうそれらをリセットするtw oスコープ変数と詳細要素を破棄します。

希望に役立ちます！