[SOLVED] Shake animation with AngularJS

Shake animation with AngularJS

I'm still learning AngularJS and have previously been using jQuery etc. to archive same feeling.

I have a login function which redirects a user if succesful login and otherwise - as for now - prints to the console. I would like to "shake" the form-html-DOM if password is incorrect.

This is my code in my controller:

    user.login(self.username, self.password).then(
        function(res) {
            $location.path('/dashboard');
        }, function(res) {
            console.log(res.data.error);
        }
    );

With jQuery I would do something like:

    user.login(self.username, self.password).then(
        function(res) {
            $location.path('/dashboard');
        }, function(res) {
            $("#my-login-form").shake();
        }
    );

This is of course not good with AngularJS. What is the simplest and best way to do something similar? I've tried to read the ngAnimate docs, but need a better understanding/example of something like that.

Solution

You will need to use ng-animate. Here you can find a good tutorial to start using it. And here you can find a CSS3 animation to do the shake.

You will have to:

Include angular-animate.js and ngAnimate to your angular module
Assign CSS class with animation to form
When login returns an error change the CSS class's animation property so it will play the animation.

You can find how to do points 1 and 3 in the first tutorial I sent to you and the css animation in the second one.