javascript - AngularJS:点击时的 CSS 动画 (ngClick)

Question

我在研究这个问题时看到了几个与 Angular 中“点击时”的 CSS 动画相关的问题，但通常没有任何可靠或明确的答案。

我想知道在 AngularJS 环境 (1.x) 中单击元素时实现 CSS 动画的最佳实践方法。具体来说，假设我们想利用来自 Animate.CSS 的动画。每次我们点击有问题的元素时，这个动画就会发生。

这是我目前走的路线，但想知道是否有更好的方法:

标记:

<div class="play" ng-click="animate($event)"></div>

js 函数(在 Controller 中):

$scope.animate = function(event) {
    var el = event.srcElement;
    angular.element(el).addClass('animate');
    $timeout(function() {
        angular.element(el).removeClass('animate');
    }, 1000);
};

CSS:

.play.animate {
  animation:0.5s bounceIn ease;
}

我不是特别喜欢在这里使用超时来在动画应该完成后删除类。 ngClick 甚至是这里的答案，还是我应该使用完全自定义的指令？

Answer 1

您可以在您的 Controller 中设置一个变量:

    this.animated = false;
    this.animationToggle = function(){
        this.animated = !this.animated;
    };

然后在您的元素中更改点击时的值并有条件地添加您的类:

<div ng-class="{'play' : ctrl.animated}" ng-click="ctrl.animationToggle()"></div>