使用AngularJS摇动动画

Question

我仍在学习AngularJS，并且以前一直在使用jQuery等来归档相同的感觉。

我有一个登录功能，如果登录成功，则该用户将重定向用户，否则就象现在一样打印到控制台。如果密码不正确，我想“摇晃” form-html-DOM。

这是我在控制器中的代码：

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

使用jQuery，我会做类似的事情：

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

对于AngularJS，这当然不好。做类似事情的最简单，最好的方法是什么？我试图阅读ngAnimate文档，但需要更好的理解/类似的例子。

Answer 1

您可以使用CSS添加动画。例如animate.css，然后在发生某些情况时使用angular添加类。

例：

视图：

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

控制器：

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);
    }
);

说明：

ng-class =“ {'shake'：error}”

如果error变量为true，则有条件地添加“ shake”类。如“ animated.css”中所定义的那样，将触发震动效果。当然，您也可以创建自己的CSS样式。

演示：https : //jsfiddle.net/mkraLxs3/3/