AngularJS: CSS Animation On Click (ngClick)

AngularJS: CSS Animation On Click (ngClick)

本文关键字：ngClick Click On CSS Animation AngularJS      更新时间：2023-09-26

在研究这个问题时，我在 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 甚至是这里的答案，还是我应该使用完全自定义的指令？

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

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

在您的元素中，单击时更改值并有条件地添加您的类：

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

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

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

超时替换为

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

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);
  }
};
 })
相关文章：