Question

在this other question中，答案提供了一种解决方法（一种肮脏的黑客攻击），使ng-enter动画在页面加载时起作用。

但是，升级到1.4之后，这句话：

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

不再有用了。

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

Answer 1

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

＆＃13;

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();
    }
  };
}]);

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: