使用AngularJS摇动动画

Question

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.

Answer 1

You could use CSS to add the animation. For instance animate.css and then use angular to add the class when something happens.

Example:

View:

<div ng-class="{'shake':error}" style="width:200px;height:200px;background:blue" class="animated"></div>

Controller:

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

Explanation:

ng-class="{'shake':error}"

conditionally add the "shake" class if the error variable is true. Together with the "animated" the shake effect is triggered as defined in animated.css. You could of course create your own css styles as well.

Demo : https://jsfiddle.net/mkraLxs3/3/

Answer 2

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.