angularjs - 在Angular 1.4+中页面加载时ng-repeat交错动画

Question

在this other question中，答案提供了一种变通办法(肮脏的hack)，以使ng-enter动画在页面加载时起作用。

但是，升级到1.4后，此语句:

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

不再工作了。

注意:不能使用$timeout，因为我已经尝试过了，但是我需要给它一个很大的超时时间(超过1.5秒，这是 Not Acceptable )。

Answer 1

您可以使用$ animateCss服务手动调用动画。请注意animateOnLoad指令:

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>