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 ?

Soneson

Please contemplate to use the new version of Angular, the 1.2.1, which has a much better animation system. You'll find a wonderful tutorial here. For your problem, you must trigger the animation by yourself with $animate (and $animate.addClass('change'), for instance, is probably a better choice than $animate.enter() in your case !). – Parthenos

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

Cattail

Thanks. I now understand, how to use the animation when the DOM event is not add,remove, hide and show. I tried to install angular-animate module but was not able to because there was no CDN which gave anuglar-animate js for version 1.1.5. Have they removed it from newer version ? – Soneson

Also as expected angular 1.1.5 does not work with angular-animate version 1.1.2 – Soneson

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

Niven

Answer 3

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.

Owades