$animate tallying should account for no-ops

[jonrimmer]

So if I have a directive that does the following...

scope.$watch('property', function(value) {
  if (value) {
    $animate.addClass(element, 'has-value');
  }
  else {
    $animate.removeClass(element, 'has-value');
  }
});

...and during the initial digest, the value of property is initially null, but is then populated from some data store. Then the watch will be called twice, resulting in a removeClass() call (when the class isn't actually present), followed by an addClass() call. The end result would be the class is not added, which is not what I want.

Prior to to RC0, this pattern was simple, obvious, and it worked. It's a little wasteful to have the redundant removeClass() call, but since the class isn't actually present at that point, it's basically a no-op.

In RC0, $animate's tallying breaks this pattern. I presume it is counting the two calls as (-1) + 1, equalling 0, so performing no animation. However, since the the first removeClass() call is a no-op, the subsequent addClass() call should still run.

More generally, any call to addClass() and removeClass() that wouldn't actually result in a change should not be considered for tallying. If, during a digest cycle, the following series of operations was performed:

removeClass() -> No-op
addClass()
addClass() -> No-op
addClass() -> No-op
removeClass()

It should be logically equivalent to the following:

addClass()
removeClass()

With the result being that no class is added.

Without this, the developer is forced to manually do the same de-duping everywhere such class toggling is applied using an extra state variable.

[petebacondarwin]

I suspect that there is some reasoning behind such tallying. Probably to do with ngAnimate not being able to be sure what order the calls are made. Without the tallying you would get the last in wins situation, which I guess is undesirable.

In your case, unless undefined really is a valid value for value then I would do:

scope.$watch('property', function(value) {
  if (angular.isDefined(value)) {
    if (value) {
      $animate.addClass(element, 'has-value');
    }
    else {
      $animate.removeClass(element, 'has-value');
    }
  }
});

By the way, all watchers are called at start-up with undefined for the value to initialize them. So this is a common pattern.

[petebacondarwin]

Perhaps @matsko has some view on this...

[IgorMinar]

I spoke with @matsko and he likes the proposal.

[matsko]

Working on this on Sunday.