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

Question

摇摆不定的动画很棒!但是如果没有用户交互,我就无法工作.

总正常ng重复列表:

<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