AngularJS只是ng repeat中的第一个元素设置动画

Question

由于某些原因，使用下面的代码，ngRepeat只对第一个项目设置动画，并立即显示其余项目。一旦scope.categories项目被更新，则在模板中触发ng重复。

dataSource.getCategories()
    .then(function(categories) {
        $scope.categories = categories;
    }, function(message) {
        dataSource.setActivity(false, message);
    });

但是，如果我将代码更改为下面的代码，并在页面中添加<a ng-click="start()">Start</a>，它就可以工作了。是的，我尝试过$timeout，甚至长达5秒，它不会改变情况。

dataSource.getCategories()
    .then(function(categories) {
        $scope.start = function() {
            $scope.categories = categories;
        }
    }, function(message) {
        dataSource.setActivity(false, message);
    });

有人能解决这个问题吗？

Answer 1

我用AngularJS 1.2.9尝试了你的CSS，得到了同样的结果。然而，它适用于1.2.13。1.2.*-分支中的ngAnimate模块有很多更改，所以在不深入研究的情况下，我猜这是一个已经修复的错误。

演示-1.2.9不工作：http://plnkr.co/edit/WvK2DDB6wTUkjx4Ah2bs?p=preview

演示-1.2.13工作：http://plnkr.co/edit/50UdTAKAsua85hyLc1O6?p=preview

Answer 2

我遇到了同样的问题（Angular 1.2.21）。我的问题是在transition: all 1s linear样式上使用!important。试着去掉它，看看它是否有效。如果您首先需要!important，请尝试简化CSS。

以下是一些plunker来说明我遇到的问题：

• 带!importanthttp://plnkr.co/edit/T1Q8DYtNJ6NYvRtrFk10?p=preview
• 无!importanthttp://plnkr.co/edit/pftzeR1gDmKTgSnvGLgd?p=preview