Is it possible to animate cell values changing in ng-grid?

Question

I have a grid set up to display some input values and computed values.

The cells all use a custom template, based on the latest default template, that simply changes the color of editable cells:

<div class="ngCellText"
     ng-class="col.colIndex() + (col.enableCellEdit ? ' blueCel' : '')"
     style="text-align:right"
     title="{{COL_FIELD}}">
  <span ng-cell-text>{{COL_FIELD CUSTOM_FILTERS}}</span>
</div>

It looks like this:

Next I've been tasked with adding a slight animation, like the cell background flashing green then fading back to white, whenever a value has changed. I'm fairly new to angular so I'm not sure where to start. None of the examples I've seen that use ng-animate (list add/remove, element show/hide, etc) seem to translate well to this scenario.

Can someone point me in the right direction, maybe an example of a div or span animating in response to a change in its inner HTML?

Answer 1

What you're going to want to do is a directive. The directive will need to simply assign a value to the item you want to flash and will be watching itself for the values to change. You can do the animation using CSS and angular's way of dealing with the CSS is pretty slick. You can create the directive like so...

module.directive('customDirective', ['$compile', function($compile,) {
    return {
        transclude: true,
        scope: {
            resource: '='
        },
        link: function(scope, element, attrs){
            //All the logic for assigning the value here.
            scope.flash = true;

        }
    });

Next you're going to want to create a template where you can insert this directive.

<div custom-directive ng-show="flash" class="fadein fadeout" resource="row.getProperty(\'resource\')"></div>

Use that template in the grid like so

$scope.gridOptions = { 

    data: 'dataFromService',

    columnDefs: [{field:'column', displayName:'Some Column', cellTemplate:
        '<div custom-directive ng-show="flash" class="fadein fadeout"resource="row.getProperty(\'resource\')"></div>'}
                 ],
    }

One of the more important parts here are the class additions (fadein and fadeout) Finally the CSS that will do most of the work.

fadein.ng-hide-remove,
.fadeout.ng-hide-add {
    -webkit-transition: 400ms ease-in-out all;
    -moz-transition: 400ms ease-in-out all;
    -o-transition: 400ms ease-in-out all;
    transition: 400ms ease-in-out all;
    display: block !important;
}

.fadein.ng-hide-remove,
.fadeout.ng-hide-add.ng-hide-add-active {
    opacity: 0;
}

.fadeout.ng-hide-add,
.fadein.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}

While this isn't exactly the CSS you'll need it'll give you the basic setup for what you need to do. This code is from a flashing save button that only appears when somebody saves the resource.