如何在AngularJS动画中使用ng leave stagger

我正在探索AngularJS中的动画，我遇到了一个让交错CSS动画工作的问题。当添加新项目时，它可以正常工作，但当同时删除多个项目时，项目将从集合内部而不是从后面删除。换言之，删除项目的顺序与我预期的相反

HTML:

CSS:

我在这里创建了一个JSFIDLE来记录这个问题：

---

这是一个已知的问题，还是我在JS代码或CSS中做错了什么？

我相信动画库就是这样工作的。它不知道删除或添加了什么，只是重新渲染数组

下面是一个技巧，您可以使用$timeout来模拟相同的行为

    var remove = function () {
        $scope.companies.splice($scope.companies.length - 1, 1);
    };

    $scope.remove = function () {
         for (var i = 0; i < 3; i++)
            $timeout(remove, 100);
    }

---

这里有一种方法可以解决这个问题，尽管这是一个非常棘手的问题

通过在第20033行添加以下代码，我更改了angular.js文件版本1.2.16：

var elements = 0;
for (key in lastBlockMap) { if (lastBlockMap.hasOwnProperty(key)) { elements++; } }
for (key in lastBlockMap) { if (lastBlockMap.hasOwnProperty(key)) { forEach(getBlockElements(lastBlockMap[key].clone), function (e) { e.ElementsToRemoveCount = elements; }); } }

可能有更优雅的方法来编写代码，但它的编写要尽可能紧凑，并且不干扰周围的代码

此外，必须将以下代码添加到angular-animate.js文件（也是版本1.2.16）的第1227行：

if (animationEvent == 'leave' && element[0].ElementsToRemoveCount)
   itemIndex = element[0].ElementsToRemoveCount - itemIndex;

第一个代码段用要删除的元素总数的信息标记元素。第二个代码段反转了在“离开”动画中用于确定移除顺序的索引

---

这绝对是破解angular源文件的最后手段，但我看没有其他选择。一开始我不明白为什么没有实现这样的工作。另外，我不知道我是否在这些更改中引入了一堆bug或意外行为，但它确实工作得很好。

超时的想法没有那么好。当应用ng重复过滤器时，上述问题很明显。在这种情况下，我不负责显示/隐藏项目。和中的是哪一行？

    var remove = function () {
        $scope.companies.splice($scope.companies.length - 1, 1);
    };

    $scope.remove = function () {
         for (var i = 0; i < 3; i++)
            $timeout(remove, 100);
    }

var elements = 0;
for (key in lastBlockMap) { if (lastBlockMap.hasOwnProperty(key)) { elements++; } }
for (key in lastBlockMap) { if (lastBlockMap.hasOwnProperty(key)) { forEach(getBlockElements(lastBlockMap[key].clone), function (e) { e.ElementsToRemoveCount = elements; }); } }

if (animationEvent == 'leave' && element[0].ElementsToRemoveCount)
   itemIndex = element[0].ElementsToRemoveCount - itemIndex;