Javascript AngularJS 1.2 ng页面加载时重复动画

你太棒了！但是如果没有用户交互，我就无法让它工作

有一个总的正常ng重复列表：

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

还有一些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;
}

但在页面加载时，其显示没有动画。我插入了一个用随机数替换类别数组的按钮，它很快就会消失

当用户第一次访问页面时，我必须做什么才能让动画正常工作

演示在这里：

---

我找到了一些用

$timeout（）

破解的答案，但我只得到了第一个项目的动画。而且感觉不太好。

根据设计，在引导时禁用动画，请参见：

lioli在评论中提供了一个变通方法（肮脏的黑客），可以在页面加载时启用动画

将此行放在控制器的开头（不要忘记插入

$rootElement

）

示例Plunker:

对于仅在第一个项目上获得动画的问题。据报道，这是一个只在angular animate的缩小版本中出现的错误，即

angular animate.min.js

在上面的plunker中，我已更改为未统一的

angular animate.js

，它似乎工作正常

---

有关该问题的更多详细信息，请参见：

和@runTarm答案之外的另一个选项是在初始加载后填充数据。简单到：

$scope.items = [];

var items = 'abcdefghijklmnopqrstuvwxyz'.split("");

$timeout(function() {
  $scope.items = items;  
}, 0);

---

谢谢你的精彩回答<代码>$rootElement.data（）…适合我。仍然不是最干净的解决方案，但我更喜欢它，而不是

$timeout（）

解决方案。这在angular 1.4上似乎不起作用。请参阅其他解决方案。我将使用runTarm的答案，将其包装在一个服务中，然后它将是一个干净且难忘的解决方案。有希望地。谢谢你的建议。

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

$scope.items = [];

var items = 'abcdefghijklmnopqrstuvwxyz'.split("");

$timeout(function() {
  $scope.items = items;  
}, 0);