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

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

Answer 2

in Angular 1.5 u can use ngAnimateSwap built in directive.

From the docs:

ngAnimateSwap is a animation-oriented directive that allows for the container to be removed and entered in whenever the associated expression changes. A common usecase for this directive is a rotating banner or slider component which contains one image being present at a time. When the active image changes then the old image will perform a leave animation and the new element will be inserted via an enter animation.

Answer 3

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