javascript - Shake animation with AngularJS - Stack Overflow

admin管理员组

文章数量:1336632

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.

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.

• javascript
• jquery
• angularjs
• ng-animate

Share Improve this question Follow asked May 18, 2016 at 13:37 Michael NielsenMichael Nielsen 1,24233 gold badges2323 silver badges3939 bronze badges 2

• See stackoverflow./questions/36962903/… – Mohammad Commented May 18, 2016 at 14:02
• This is best done with CSS. Use Angular simply to attach a class on the login form, and define a CSS animation for that class to "shake" the form. I'd suggest to re-word the question and re-tag it as CSS question. – C14L Commented May 18, 2016 at 14:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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/mkraLxs3/3/

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.

本文标签： javascriptShake animation with AngularJSStack Overflow