ng-repeat 动画完成答案

【问题标题】：ng-repeat animation finishedng-repeat 动画完成
【发布时间】：2014-11-13 06:58:56
【问题描述】：

我知道当我手动对任何元素执行动画时，我可以使用$animate 服务调用一个方法（如this answer 中建议的那样），但是我想检测ng-repeat 动画何时结束。

index.html

<div class="col-sm-6 col-md-4" ng-repeat="cat in cats">
  <div class="cat-container card">
    <div class="cat-header">
      <h4 ng-click="setActive($index)">{{cat.title}}</h4>
    </div>
    <div class="cat-body">
      <div ng-if="cat.img" class="cat-img">
        <img ng-src="{{cat.img}}">
      </div>
      <div class="sub-cats-container">
        <div class="sub-cat" ng-animate ng-repeat="subcat in cat.subcats | filter: getSearch($index)">
          <div class="cat-img">
            <img ng-src="{{subcat.img}}" alt="{{subcat.title}}" width="150px" height="70px">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

动画

.sub-cat.ng-move,
.sub-cat.ng-enter,
.sub-cat.ng-leave {
    transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
}

.sub-cat.ng-enter.ng-enter-active,
.sub-cat.ng-move.ng-move-active,
.sub-cat.ng-leave {
    opacity: 1;
    max-height: 70px;
}

.sub-cat.ng-leave.ng-leave-active,
.sub-cat.ng-enter {
    opacity: 0;
    max-height: 0px;
}

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

可以使用$animate:close 事件获得ng-enter 和ng-move 的回调

例如（使用 angularJS 1.3.4）：

myApp.directive('subCat', function() {
    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
          element.on('$animate:close', function() {
            // This will fire after every CSS or JavaScript animation is complete
            console.log('$animate:close');
          });
        }
    };
});

这是一个说明这一点的小提琴：http://jsfiddle.net/4wt4nr6s/

虽然它适用于 ng-enter 和 ng-move，但这似乎不适用于 ng-leave，这是 angularJS 尚未解决的错误： https://github.com/angular/angular.js/issues/6049

【讨论】：