javascript - 动画化新的 ng-grid 行

Question

如何在 ng-grid 中为新创建的行设置动画？

我想要的是，当新数据从服务器传入时，它会被添加到网格的开头，然后该行会发光几秒钟。

我已经尝试将 ng-animate 类添加到网格的 rowTemplate 中，但没有成功:

$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 文档中提取)在哪里:

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

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

 opacity: 1;
}

但这似乎不适用于网格。

有什么办法可以做到这一点吗？

这是我尝试的一个 Plunker http://plnkr.co/edit/iR9voQaFRREi0pjNLQgc?p=preview

我添加了一个 <ul>在底部显示我想要的行为(并证明 ng-animate 正在运行)。

Answer 1

设置动画的正确方法是将动画绑定(bind)到 .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 仍然通过在网格底部添加一行并重新绑定(bind)所有行来运行，这样，无意中，第一个网格中的项目是获取动画的项目。

这是我的 fork 的 plunker，上面的 css 可以正常工作——也许你可以更进一步:http://plnkr.co/edit/gNSM4FRMFcTtQtT6EU7b?p=preview

作为一个想法:也许你可以让元素作为正常的推送进入数据集，并通过使它们保持相反顺序的东西对网格重新排序。这可能会诱使网格为最新的内容设置动画，但将最新的内容保留在网格的顶部。

老实说，我发现简单地构建我自己的网格并将 ng-repeat 绑定(bind)到 tr 比尝试使用其他网格系统容易得多，尤其是像 ng-grid 这样的网格系统您无法控制行为的地方。