小编pau*_*aul的帖子

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

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

总正常ng重复列表:

<div ng-controller="controller">    
    <div class="category" ng-repeat="category in categories">
      {{category}}
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

在控制器中定义:

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

还有一些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;
}
Run Code Online (Sandbox Code Playgroud)

但在页面加载时它显示没有动画.我插入了一个用随机数替换categories数组的按钮,它就会很好地消失.

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

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

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

javascript animation angularjs angularjs-ng-repeat angularjs-animation

2
推荐指数
1
解决办法
3440
查看次数