Angularjs：ng-class 和 CSS 动画（只运行一次）答案

【问题标题】：Angularjs: ng-class and CSS animations (running only once)Angularjs：ng-class 和 CSS 动画（只运行一次）
【发布时间】：2016-08-09 17:41:21
【问题描述】：

我是 AngularJS 新手，所以请耐心等待。

首先，代码。这是相关的 .html 部分：

<span ng-class="{'error-text': true, 'animated-error': vm.email_error}" ng-show="vm.email_error" translate>EMAIL_ERROR</span>

.scss 部分：

    .error-text{
      position: absolute;
      &.animated-error{
        animation: bigandnormal 2s;
      }
    }

还有一个.js，点击后正在修改vm.email_error：

var validateEmail = function(){
  var isEmailValid = /(.+)@(.+){2,}\.(.+){2,}/.test(vm.email);
  vm.email_error = !isEmailValid;
  return isEmailValid;
};

单击按钮运行validateEmail() 函数。这里发生的情况是，当我执行第一次单击（使用无效电子邮件）时，该类被正确添加到 span 并且动画运行。

但是如果我再次点击，动画就不会再次运行。看着检查员，似乎再也没有添加过里面的类。我什至尝试在validateEmail() 函数的第一行将vm.email_error 重置为false，并在再次单击之前从控制台中删除了animated-error：

angular.element(".error-text").each(function(index, el) {
    angular.element(el).removeClass('animated-error'); 
});

但我再也看不到动画和课程了。

但无论如何我不认为我的做法不对，应该有办法做到这一点。

这就是我要问你的:)

提前致谢。

更新：如果将vm.email_error = !isEmailValid; 放入setTimeout 中，它可以正常工作。很高兴能从了解该技术的人那里得到解释。当然，这显然不是真正的解决方案。

【问题讨论】：

标签： javascript css angularjs animation

【解决方案1】：

尝试将 email_error 变量声明为 $scope 或 $rootScope 变量，而不是控制器变量。

var validateEmail = function(){
  var isEmailValid = /(.+)@(.+){2,}\.(.+){2,}/.test(vm.email);
  $scope.email_error = !isEmailValid; // or $rootScope.email_error = !isEmailValid;
  return isEmailValid;
};

而且你不需要在你的 css 类名周围加上引号。

然后在你的 html 中调用它，不带前缀，像这样：

<span ng-class="{error-text: true, animated-error: email_error}" ng-show="email_error" translate='EMAIL_ERROR'></span>

另外，注意如何使用角度翻译：

如果你用它作为指令，你必须把它写成
```
<p translate='MY_TRAD'></p>
```
如果你把它用作过滤器，那么它就是
```
<p>{{ 'MY_TRAD' | translate }}</p>
```

（角度翻译文档：https://github.com/angular-translate/angular-translate）

【讨论】：

感谢您的回答和提示，无论如何它不起作用。如果可以，请查看原始问题的更新。