Question

我正在使用AngularJS，我正在尝试动画输入数组中的新元素：

<div ng-repeat="obj in objects">
  {{ obj.name }}
</div>

但是我更新数组的方式有问题：我正在使用http.get进行操作，而我并没有将一些新元素推送到我的对象，而是像这里完全更新它：

$http.get('/some/url').success(function(objects){
  $scope.objects = objects;
});

在这种情况下有没有办法处理动画，还是需要更改我更新数组的方式？

Answer 1

如果您使用ngAnimate，您应该能够在没有问题的情况下为ng-enter类设置动画。看看这个plunker ......

http://plnkr.co/edit/oCLzLHbDLtNT8G8rKFJS?p=preview

我设置了2秒的延迟，然后完全替换了阵列。动画仍然按预期工作。使用Angular 1.2+版，只需在主应用程序模块中包含ngAnimate模块

var app = angular.module('app', ['ngAnimate']);

将ng-repeat元素赋予css类，例如“animate”。当通过angular

添加ng-enter，ng-leave类时，附加css动画

.animate.ng-enter, 
.animate.ng-leave {
...
}
.animate.ng-enter.ng-enter-active, 
.animate.ng-leave{
 ...
}

Answer 2

这是一个老问题，但我偶然发现它并认为我会投入0.02美元

而不是用新列表替换对象只是为了获得一些新元素，而是只将新元素推送到数组的后面，然后将数组显示在your ng-repeat in reverse.这样当新的物品进来，一次一个，让它们动画。

$http.get('/some/url')
.success(function(objects){
  for(o in objects){
    if(!$scope.objects[o]){
      $scope.objects.push(objects[o]);
    }
  }
});

在AngularJS中为新元素设置动画

2 个答案: