2

惊人的动画很棒！但是如果没有用户交互，我就无法让它工作。

有一个完全正常的 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;
}

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

当用户第一次访问页面时，我该怎么做才能让动画工作？

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

我找到了一些乱七八糟的答案，$timeout()但我只在第一个项目上得到了动画。而且感觉不太好。

4

2 回答 2

5

引导时禁用动画是设计使然，请参阅：#5130。

lioli 在评论中提供了一种解决方法（一种肮脏的技巧），可以在页面加载时启用动画。

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

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

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

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

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

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

于 2014-08-04T14:08:11.963 回答
1

除了@runTarm 的答案之外的另一个选择是在初始加载后填充数据。像这样简单的东西：

$scope.items = [];

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

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

修改后的 plunkr 示例

于 2014-08-04T14:12:49.653 回答