Completed ng-repeat animation
I know that I can use $animate
to call a method when I manually animate any element (like this answer ), however I want to detect when the animation ends 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>
animations
.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;
}
source to share
You can get a callback for ng-enter
and ng-move
using an event$animate:close
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
console.log('$animate:close');
});
}
};
});
Here's a script to illustrate this: http://jsfiddle.net/4wt4nr6s/
While it works great for ng-enter
and ng-move
it doesn't seem to work for ng-leave
, this is a bug that angularJS has yet to resolve:
https://github.com/angular/angular.js/issues/6049
source to share