Question

Staggering Animations太棒了！但是如果没有用户交互，我就无法工作。

有一个完全正常的ng-repeat列表：

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

在控制器中定义：

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

但是在页面上加载它没有动画显示。我插入了一个用随机数替换categories数组的按钮，它很好地消失了。

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

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

我找到了一些用$timeout()攻击的答案，但我只在第一项上获得动画。它感觉不舒服。

Answer 1

根据设计，在引导时禁用动画，请参阅：#5130。

lioli在评论中提供了一种解决方法（脏黑客），以便在页面加载时启用动画。

将此行放在控制器的开头（不要忘记注入$rootElement）。

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

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

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

在上面的plunker中，我已经变成了一个未经宣传的angular-animate.js，它似乎工作正常。

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

Answer 2

除了@ runTarm的答案之外，另一个选择是在初始加载后填充数据。简单的事情：

$scope.items = [];

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

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

Modified plunkr example

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

2 个答案: