重新排序数组时如何使用角度动画触发 ng-move？

Question

使用角度 1.2.4 我试图弄清楚如何在重新排序重复项目时触发 ng-animate 的移动。我知道 ng-animate 正在工作，因为进入、离开和移动的动画都是在应用过滤器时触发的。但是，当我使用一些数组方法对数组重新排序时，不会触发任何动画。 我怀疑问题的一部分是我实际上是在使用这种方法向数组中删除和添加元素，而不是真正“移动”它们：

  $scope.moveDown = function(order){
    var temp = $scope.names[order];
    $scope.names.splice(order, 1);
    $scope.names.splice(order+1, 0, temp);
  }

这是一个显示我在做什么的 plunker：http://plnkr.co/edit/SuahT6XXkmRJJnIfeIO1?p=preview

单击任何名称以使其在列表中向下移动。

有没有办法在不拼接的情况下重新排序数组？还是在 item 的 $index 发生变化时手动触发移动动画？

Answer 1

尝试在移除和插入之间留出一个间隙（消化中），这将使ng-enter 和ng-leave 动画启动。

    var temp = $scope.names.splice(order, 1).pop();
    $timeout(function(){
       $scope.names.splice(order+1, 0, temp);
    });

Plnkr

如果您想避免使用超时，请稍微重组您的数据，使其成为对象数组（无论如何这总是可取的）并执行以下操作：-

视图模型：-

  $scope.names = [{'name':'Igor Minar'}, {'name':'Brad Green'}, {'name':'Dave Geddes'}, {'name':'Naomi Black'}, {'name':'Greg Weber'}, {'name':'Dean Sofer'}, {'name':'Wes Alvaro'}, {'name':'John Scott'}, {'name':'Daniel Nadasi'}];

在处理程序中：-

  $scope.moveDown = function(order){
    var itm  = $scope.names.splice(order+1, 1).pop(); //Get the item to be removed
    $scope.names.splice(order, 0, angular.copy(itm)); //use angular.clone to get the copy of item with hashkey
  }

这里有两件事很重要，您需要使用 angular.clone 以便从移动项目中删除默认跟踪器属性（$$hashkey），似乎只有在删除项目并插入新项目时（基于 tracker 属性） angular 将动画类添加到它。你不能像原来那样使用原始的。

Plnkr2