Question

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

我有一个登录功能，如果成功登录则重定向用户，否则 - 现在 - 打印到控制台。我想＆＃34;摇晃＆＃34;如果密码不正确，则为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); } );

<强>解释

纳克级=＆＃34; {＆＃39;摇＆＃39;：错误}＆＃34;

有条件地添加＆＃34; shake＆＃34; class，如果error变量为true。与'＃34;动画＆＃34;一起按照animated.css中的定义触发抖动效果。你当然可以创建自己的CSS样式。

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

Answer 2

您需要使用ng-animate。 Here你可以找到一个很好的教程来开始使用它。 here你可以找到一个CSS3动画来进行摇动。

你必须：

将angular-animate.js和ngAnimate包含在角度模块中
使用动画分配CSS类
当登录返回错误时，更改CSS类的动画属性，以便播放动画。

您可以在我发给您的第一个教程和第二个教程中找到css动画中的第1点和第3点。

使用AngularJS摇动动画

2 个答案: