javascript - 使用 AngularJS 摇动动画

Question

我还在学习 AngularJS，之前一直在使用 jQuery 等来记录同样的感觉。

我有一个登录功能，如果成功登录则重定向用户，否则 - 就目前而言 - 打印到控制台。如果密码不正确，我想“摇动”form-html-DOM。

这是我 Controller 中的代码:

    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>

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

解释:

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

如果错误变量为真，则有条件地添加“摇动”类。与“动画”一起触发摇动效果，如 animated.css 中所定义。您当然也可以创建自己的 CSS 样式。

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