Q:

Calling an Animation on Click

I'm using AngularJS v1.2
I want to run an animation after clicking a button.
psuedo:
<a ng-click="submit()" type="button">Submit</a>

The Controller, has a method submit, which among other things makes an AJAX request:
$scope.submit = function(){
  $http( { method: 'POST', url: '/url' } ).success(function(data) {
      $scope.myData = data.myData;
      //Animate DOM element 
  });
});

Now this is where my question lies. I want to be able to run an animation on the ajax callback.
However, the docs say that this is not a good idea (DOM Manipulation should not be done in the controller.)
What then is an angular way of doing it?
Basically, how do I do Click->Ajax->Animation in Angular

A:

You should use angular animation. They are providing ngAnimate service to do it easily.
Simply you can animate your DOM element with CSS3 transitions. Just use ngClass and toggle it after you received ajax response. Your DOM element will animate automatically.
.css-class-add, .css-class-remove {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.css-class,
.css-class-add.css-class-add-active {
  color: red;
  font-size:3em;
}

.css-class-remove.css-class-remove-active {
  font-size:1.0em;
  color:black;
}

See Angular Animation in action

