Question

我是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()功能。这里发生的是当我执行第一次点击（使用无效的电子邮件）时，该类被正确添加到范围并且动画运行。

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

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

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

但无论如何我认为我没有以正确的方式做到这一点，应该有办法实现这一目标。

这就是我问你的问题:)

提前致谢。

更新：如果将vm.email_error = !isEmailValid;放在setTimeout中，我可以正常使用。从了解技术的人那里得到解释会很棒。当然，很明显这不是真正的解决方案。

Answer 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>
```

（angular translate doc：https://github.com/angular-translate/angular-translate）

Angularjs：ng-class和CSS动画（仅运行一次）

1 个答案: