ng-animate : Animation when model changes

Question

I have created a table in which user can increase and decrease the value. See the Fiddle

//sample code as its not allowing me to push the link to JSFiddle with out pasting code     <tr ng-repeat="d in dataSource" ng-animate="'animate'">  // css - as from angular page .animate-enter {     -webkit-transition: 1s linear all; /* Chrome */     transition: 1s linear all;     background-color:Yellow; }  .animate-enter.animate-enter-active {     background-color:Red; } 

I want to do animation when the model updates i.e the table column changes in background color From Red to white in case user changes the value.

So when you click up arrow or down arrow in any perticular column, the background color of that table column changes from Red to white.

I am not able to get my head around it. Any pointers on how to achieve this ?

Answer 1

There are couple of issues in your code:

1. NEVER do DOM manipulations in the code of controller: $(elem).animate(.. is something you should avoid. Only in directives you can manipulate with DOM element.

2. In 1.2+ versions of AngularJS you need to reference ngAnimate module.

3. It is better to do CSS3 animations with fallback to js-based animations.

I propose to write a directive that will track changes and add a class that will trigger the animation and then remove it:

app.directive('animateOnChange', function($animate,$timeout) {   return function(scope, elem, attr) {       scope.$watch(attr.animateOnChange, function(nv,ov) {         if (nv!=ov) {           var c = nv > ov?'change-up':'change';           $animate.addClass(elem,c).then(function() {             $timeout(function() {$animate.removeClass(elem,c);});           });         }       });    }; }); 

Working example: http://plnkr.co/edit/zs495osfSnWSvWBIn3rh?p=preview

Answer 2

This can be solved with a simple directive and CSS3 animations.

HTML

<span animate-on-change="someValue">{{someValue}}</span> 

Directive

myModule.directive('animateOnChange', function($timeout) {   return function(scope, element, attr) {     scope.$watch(attr.animateOnChange, function(nv,ov) {       if (nv!=ov) {         element.addClass('changed');         $timeout(function() {           element.removeClass('changed');         }, 1000); // Could be enhanced to take duration as a parameter       }     });   }; }); 

CSS

[animate-on-change] {   transition: all 1s;   -webkit-transition: all 1s; } [animate-on-change].changed {   background-color: red;   transition: none;   -webkit-transition: none; } 

Fiddle