Javascript 使用AngularJS进行抖动动画

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

我有一个登录功能，它可以在成功登录时重定向用户，或者像现在一样打印到控制台。 如果密码不正确，我想更改表单HTMLDOM

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

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

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

使用jQuery，我可以执行以下操作：

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

---

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

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

例如：

视图：

说明：

ng类={'shake'：错误}

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

---

演示：

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

例如：

视图：

说明：

ng类={'shake'：错误}

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

---

演示：

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

你必须：

将angular-animate.js和ngAnimate包含到angular模块中 将带有动画的CSS类指定给窗体 当登录返回错误时，请更改CSS类的动画属性，以便它播放动画。

---

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

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

你必须：

将angular-animate.js和ngAnimate包含到angular模块中 将带有动画的CSS类指定给窗体 当登录返回错误时，请更改CSS类的动画属性，以便它播放动画。

---

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

请看这是使用css完成的最好方法。使用Angular在登录表单上附加一个类，并为该类定义一个CSS动画以震动表单。我建议将这个问题重新命名，并将其重新标记为CSS问题。请看，这最好用CSS来完成。使用Angular在登录表单上附加一个类，并为该类定义一个CSS动画以震动表单。我建议将这个问题重新命名，并将其重新标记为CSS问题。似乎我只能摇一次表单，因为类正在添加，然后一直存在。我如何在每次单击按钮时摇动示例中的div？@Michael Nielsen使用超时并在其中设置$scope.error=false。@dz210可以将其添加到JSFIDLE中吗？@MatijaŽupančIćI将超时添加到我的答案中。当然，您可以使用Angular的$timeout，因为类被添加，然后一直存在，所以我似乎只能摇晃表单一次。我如何在每次单击按钮时摇动示例中的div？@Michael Nielsen使用超时并在其中设置$scope.error=false。@dz210可以将其添加到JSFIDLE中吗？@MatijaŽupančIćI将超时添加到我的答案中。当然，您可以使用Angular的$timeout，它似乎正在工作，但如何在shake动画之后删除该类，以便在用户尝试登录并失败两次时再次震动？我可以在函数开始时添加$scope.shake=false，但这是最好的方法吗？似乎正在工作，但是，如何在shake动画之后删除该类，以便在用户尝试登录并失败两次时它可以再次抖动？我可以在函数的开头添加$scope.shake=false，但这是最好的方法吗？

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