2

ng-grid で新しく作成された行をアニメーション化するにはどうすればよいですか?

私が望むのは、サーバーから新しいデータが入ってくると、それがグリッドの先頭に追加され、その行が数秒間光るということです。

グリッドのrowTemplateにng-animateクラスを追加しようとしましたが、失敗しました:

$scope.gridOptions = { 
    data: 'myData',
    rowTemplate: '<div style="height: 100%" class="reveal-animation"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div><div ng-cell></div></div></div>'
};

私の公開アニメーション（ng-animate docsから直接持ち上げたもの）は次のとおりです。

.reveal-animation.ng-enter {
 -webkit-transition: 1s linear all;
 transition: 1s linear all;
 opacity: 0;
}

.reveal-animation.ng-enter.ng-enter-active {

 opacity: 1;
}

しかし、これはグリッドでは機能しないようです。

これを達成する方法はありますか？

これが私の試みのプランカーです http://plnkr.co/edit/iR9voQaFRREi0pjNLQgc?p=preview

<ul>必要な動作を示すために (および ng-animate が機能していることを証明するために)、下部にa を追加しました。

4

1 に答える 1

7

これをアニメーション化する適切な方法は、アニメーションを次のようにバインドすること.ngRowです。

/*
 The animate class is apart of the element and the ng-enter class
 is attached to the element once the enter animation event is triggered
*/
.ngRow.ng-enter {
 -webkit-transition: 1s linear all; /* Safari/Chrome */
 transition: 1s linear all; /* All other modern browsers and IE10+ */

 /* The animation preparation code */
 opacity: 0;
}

/*
 Keep in mind that you want to combine both CSS
 classes together to avoid any CSS-specificity
 conflicts
*/
.ngRow.ng-enter.ng-enter-active {
 /* The animation code itself */
 opacity: 1;
}

問題は、unshift を使用して値を配列の先頭にプッシュしていることですが、ng-grid はグリッドの下部に行を追加し、すべての行を再バインドして、意図せずに最初の項目がgrid はアニメーションを取得するものです。

これは、上記の css が機能するフォークのプランカーです。おそらく、さらに一歩進めることができます: http://plnkr.co/edit/gNSM4FRMFcTtQtT6EU7b?p=preview

考えてみると、要素を通常のプッシュとしてデータセットに入れ、グリッドを逆順に並べ替えることができるかもしれません。これにより、グリッドをだまして最新のものをアニメーション化させることができますが、最新のものはグリッドの上部に保持されます。

正直に言うと、自分のグリッドを構築して ng-repeat をバインドするだけでtr、他のグリッド システム、特に動作を制御できない ng-grid のようなものに煩わされるよりもはるかに簡単であることがわかりました。

于 2013-12-04T20:40:04.840 に答える