Animating new ng-grid rows

Question

How can I animate a newly created row in ng-grid?

What I would like is that when new data comes in from the server, it is added to the beginning of the grid, and that row then glows for a few seconds.

I've tried adding an ng-animate class to the rowTemplate for the grid, but that was unsuccessful:

$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>'
};

Where my reveal-animation (lifted straight from the ng-animate docs) is:

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

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

 opacity: 1;
}

But this does not appear to work for the grid.

Is there some way to accomplish this?

Here is a Plunker with my attempt http://plnkr.co/edit/iR9voQaFRREi0pjNLQgc?p=preview

I added a <ul> at the bottom to show the behavior that I want (and to prove that ng-animate is working).

Answer 1

The proper way to animate this is by binding an animation to .ngRow i.e.:

/*
 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;
}

The problem is that you are using unshift to push the values into the beginning of the array, but ng-grid still functions by adding a row at the bottom of the grid and rebinding all the rows such that, unintentionally, the first item in the grid is the one that gets the animation.

Here's the plunker for my fork which has the above css working - perhaps you can take it a step further: http://plnkr.co/edit/gNSM4FRMFcTtQtT6EU7b?p=preview

As a thought: maybe you can have the elements go into the data set as a normal push and re-order the grid by something that keeps them in reverse order. That might trick the grid into animating the newest thing in but keep the newest thing at the top of the grid.

To be honest, I have found that simply building my own grid and binding an ng-repeat to the tr was much easier than trying to fuss with other grid systems, especially ones like ng-grid where you don't get to control the behavior.