javascript - 页面加载时的 AngularJS 1.2 ng-repeat 动画

Question

Staggering Animations很棒!但如果没有用户交互，我无法让它工作。

总有一个正常的ng-repeat列表:

<div ng-controller="controller">    
    <div class="category" ng-repeat="category in categories">
      {{category}}
    </div>
</div>

在 Controller 中定义:

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

还有一些动画的 CSS 规则:

.category.ng-enter {
  -webkit-transition: 2s linear all;
  transition: 2s linear all;
  opacity:0;
}
.category.ng-enter-stagger {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}
.category.ng-enter.ng-enter-active {
  /* standard transition styles */
  opacity:1;
}

但是在页面加载时显示没有动画。我插入了一个按钮，用于用随机数替换类别数组，它会很好地淡入淡出。

当用户第一次访问该页面时，我需要做什么才能使动画起作用？

演示在这里:http://plnkr.co/edit/3zXENPbYA3cxJQ3Pyb34?p=preview

我找到了一些使用 $timeout() 的答案，但我只在第一个项目上获得了动画。而且感觉不舒服。

Answer 1

根据设计，引导时动画被禁用，请参阅:#5130 .

lioli 的评论中提供了一种变通方法(肮脏的 hack)以在页面加载时启用动画。

将此行放在 Controller 的开头(不要忘记注入(inject) $rootElement)。

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

示例 Plunker: http://plnkr.co/edit/9ZZ3JBOCaRJ41ssczX6l?p=preview

针对您仅在第一项上获得动画的问题。据报道，这是一个仅在缩小版本的 angular-animate 中发生的错误，即 angular-animate.min.js。

在上面的 plunker 中，我已经更改为未缩小的 angular-animate.js，它似乎工作正常。

有关该问题的更多详细信息，请参阅:#8297和 #7547