在Angular 1.4+中页面加载时重复交错动画

Question

在另一个问题中,答案提供了一种解决方法(一种肮脏的黑客攻击),使ng-enter动画在页面加载时起作用.

但是,在升级到1.4后,此声明:

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

不再起作用了.

注意:使用$timeout对我来说不是一个选项,因为我已经尝试但是我需要给它一个很大的超时时间才能使它工作(超过1.5秒,这是不可接受的).

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>