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



<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;



source to share

1 answer

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


Here's a script to illustrate this:

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:



All Articles