ng-repeat анимация завершена

Question

Я знаю, что могу использовать услугу $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; 
} 

Answer 1

можно получить обратный вызов для ng-enter и ng-move используя $animate:close событие

Например (с использованием 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