如何在 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 }"> </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 正在工作)。