ng-repeat staggered animation on page load in Angular 1.4+

Question

In this other question, the answer provides a workaround (a dirty hack) to make ng-enter animations work on page load.

But, after upgrading to 1.4, this statement:

$rootElement.data("$$ngAnimateState").running = false;

does not work anymore.

Note: Using $timeout is not an option for me, because I've tried but I need to give a big timeout to make it work (more than 1.5 seconds, unacceptable).

Answer 1

You can call animation manually with $animateCss service. Please pay attention to animateOnLoad directive:

angular.module('app', ['ngAnimate']);

angular.module('app').controller('categoriesCtrl', ['$scope', function($scope) {
  $scope.categories = ['12345', '6789', '9876', '54321'];
}]);

angular.module('app').directive('animateOnLoad',['$animateCss', function($animateCss) {
  return {
    'link': function(scope, element) {
      $animateCss(element, {
          'event': 'enter',
           structural: true
      }).start();
    }
  };
}]);

.category {
  display:block;
  font-size:20px;
  background:black;
  color:#fff;
  margin:10px;
  padding:10px;
  text-align:center;
}

.category.ng-enter {
  /* standard transition code */
  -webkit-transition: 2s linear all;
  transition: 2s linear all;
  opacity:0;
}

.category.ng-enter.ng-enter-active {
  /* standard transition styles */
  opacity:1;
}

<script src="https://code.angularjs.org/1.4.4/angular.js"></script>
<script src="https://code.angularjs.org/1.4.4/angular-animate.js"></script>
<div data-ng-app="app" data-ng-controller="categoriesCtrl">
<div class="category" ng-repeat="category in categories" animate-on-load>
  {{category}}
</div>
</div>