How to trigger an angularjs animation from a controller method?

Question

I would like to trigger an angular animation from a controller method.

I have come up with something that I am not satisfied with (see code below).

The issu

Answer 1

You will have another problem your animation isn't reset after the first fail, so consecutive fails won't execute the animation again. I'm afraid that there is no way to do this using pure CSS.

What you should do first is to use the validation services provided by Angular and then separate the logic of the error animation.

Here is the working solution, with the Prefix util factory working just fine.

• First check form.$invalid inside your signin(formCtrl) function, if the form is $invalid or the response from the service returns a login error, then call a function which will handle the animation.

---

  $scope.signin = function(form){
    if(form.$invalid){
      $scope.animateError();
    }
  };

---

• Change the CSS to only add the animation timing function and duration. So when the showAnimationError function is called it will take the form element, and add the style animationName/ webkitAnimationName with the value shake.

Also remember to add a event listener for the animation end, so you can clean this style, for consecutive calls on showAnimationError

/* css */
.shake {
    -webkit-animation-duration: 400ms;
    -webkit-animation-timing-function: ease-in-out;
    animation-duration: 400ms;
    animation-timing-function: ease-in-out;
}

---

$scope.animateError = function(){
  if(!resetAnimationHandler){
    addResetAnimationHandler();
  }
  myForm.style[prefixUtil.animationName] = 'shake';
};

I hope this helps you