ng-Animate doesn't remove add classes angular 1.2.x

Question

I am trying to have an icon animate while loading and stop the animation once loading is complete. I was attempting this by activating a class based on a refreshing property. This worked in AngularJS 1.2.0-rc.3, but now (have tried 1.2.3 and 1.2.4) the animation never stops, and I believe the reason is that the -add classes that are added are not removed when the bound variable changes to false.

Here is the plunker demonstrating.

http://plnkr.co/edit/fbcCPxwZtcIoS0ZqrHhf?p=preview

Interesting that more toggles of the variable eventually do stop the animation. Is what I am trying to do valid, I suppose I could always just show hide a loading gif, but I liked the idea of animating the existing image

Thanks! Curt

Answer 1

The problem is in your css.

You don't need '.icon-refresh-animate-add'.

Use this css class:

.icon-refresh-animate {
  animation-name: rotateThis;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: rotateThis;
  -moz-animation-name: rotateThis;
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
}

It's a carbon copy of your animate-add.

Explanation: The ngClass is turning the .icon-refresh-animate class on and off. So when the state is true the class is applied and the animation loops forever. When the state is false the css class is removed so there will be no animation at all. So this bit of code does all the work for you

ng-class="{'icon-refresh-animate':refreshing}"

And here's the full CSS:

@keyframes rotateThis {
  from {
    transform: scale(1) rotate(0deg);
  }
  to {
    transform: scale(1) rotate(360deg);
  }
}
@-webkit-keyframes rotateThis {
  from {
    -webkit-transform: scale(1) rotate(0deg);
  }
  to {
    -webkit-transform: scale(1) rotate(360deg);
  }
}

.icon-refresh-animate {
  animation-name: rotateThis;
  animation-duration: .5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: rotateThis;
  -moz-animation-name: rotateThis;
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
}