Mohammad Walid Mohammad Walid - 2 months ago 7x
Javascript Question

ng-repeat animation finished

I know that I can use

service to call a method when I manually perform animation to any elemnt (like what suggested in this answer), however i want to detect when
animation finishs.


<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 class="cat-body">
<div ng-if="cat.img" class="cat-img">
<img ng-src="{{cat.img}}">
<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">

animations,, {
transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
},, {
opacity: 1;
max-height: 70px;
}, {
opacity: 0;
max-height: 0px;


It is possible to get a callback for ng-enter and ng-move using the $animate:close event

For example (using 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

Here is a fiddle illustrating this:

While it works fine for ng-enter and ng-move, this seems not to work for ng-leave, this is a bug that angularJS has yet to solve: