Question

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

我想知道在AngularJS环境（1.x）中单击元素时实现CSS动画的最佳实践方法。具体来说，假设我们想要使用来自Animate.CSS的动画，并且每次我们点击相关元素时都应该发生这个动画。

这是我目前采取的路线，但想知道是否有更好的方法：

标记：

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

js函数（在控制器中）：

$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

您可以在控制器中设置变量：

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

在你的元素中更改click上的值并条件添加你的类：

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

Answer 2

正如另一个所说，绑定动画结束事件。然而，另一个你的答案将删除元素本身，而我认为OP想要做的是删除该类。因此：

angular.element(el).bind('webkitAnimationEnd oanimationend msAnimationEnd animationend', function () {
  angular.element(el).removeClass('animate');
});

Answer 3

您可以用

替换超时

angular.element(el).bind('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
  $(this).remove();
});

Answer 4

HTML

<div ng-controller="ReportCtrl as vm">
<div class="refresh" ng-class="{'animate':vm.refreshing}" ngclick="vm.refresh()"></div>    
</div>

控制器

.controller('ReportCtrl',function ($scope, $timeout) {
    var vm = this;
    vm.refreshing = false;
    vm.refresh = function() {
    if(!vm.refreshing){
     vm.refreshing = true;
     $timeout(function () {
      vm.refreshing = false;
     },3000);
  }
};
 })

AngularJS：单击CSS动画（ngClick）

4 个答案: