如何在ng-grid中为新创建的行设置动画?
我想要的是,当新数据从服务器进入时,它会被添加到网格的开头,然后该行会发光几秒钟.
我已经尝试将ng-animate类添加到网格的rowTemplate中,但这是不成功的:
$scope.gridOptions = { data: 'myData', rowTemplate: '' };
我的揭示动画(直接从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
我
在底部添加了一个来显示我想要的行为(并证明ng-animate正在工作).
设置动画的正确方法是将动画绑定到.ngRow
ie:
/* 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是获取动画的那个.
这是我的fork的plunker,它具有上面的css工作 - 也许你可以更进一步:http://plnkr.co/edit/gNSM4FRMFcTtQtT6EU7b?p=preview
作为一个想法:也许你可以将元素作为正常推送进入数据集,并通过使它们按相反顺序重新排序网格.这可能会欺骗网格动画最新的东西,但保持最新的东西在网格的顶部.
说实话,我发现简单地构建我自己的网格并将ng-repeat绑定到其中tr
比尝试与其他网格系统一样容易,尤其是像ng-grid那样你无法控制行为.