ng重複動畫已完成

Question

我知道我可以使用$animate服務在我爲任何elemnt手動執行動畫時調用方法（如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

有可能使用$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還沒有一個bug解決： https://github.com/angular/angular.js/issues/6049