在 AngularJS 中为新元素制作动画答案

【问题标题】：Animate new elements in AngularJS在 AngularJS 中为新元素制作动画
【发布时间】：2014-03-11 03:26:00
【问题描述】：

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

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

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

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

那么在这种情况下有什么方法可以处理动画，还是我需要更改更新数组的方式？

【问题讨论】：

我尝试循环结果并将它们推送到 $scope.objects 中，但这太快了，我没有看到动画发生....如果里面有延迟的选项“for循环”然后我真的可以判断它是否正在发生：D

标签： javascript angularjs ng-animate

【解决方案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”。并附上css动画，当ng-enter、ng-leave类通过angular添加时

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

【讨论】：

这是查理·马丁上面发布的一个不同的工作示例。 jsfiddle.net/hyga3rf1

【解决方案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]);
    }
  }
});

【讨论】：