动画新的ng-grid行

时间:2013-12-04 19:53:51

标签: javascript angularjs animation ng-grid ng-animate

如何在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;
}

但这似乎不适用于网格。

有没有办法实现这个目标?

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

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

1 个答案:

答案 0 :(得分: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仍然通过在网格底部添加一行并重新绑定所有行来实现,这样无意中,第一行网格中的项目是获取动画的项目。

这是我的叉子的上司,上面有css工作 - 也许你可以更进一步:http://plnkr.co/edit/gNSM4FRMFcTtQtT6EU7b?p=preview

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

说实话,我发现简单地构建我自己的网格并将ng-repeat绑定到tr比尝试与其他网格系统一样容易,尤其是像ng-grid这样的网格系统。 #39; t控制行为。