如何使用AngularJS动画离开交错

Question

我正在AngularJS中探索动画，遇到了一个让交错的CSS动画工作的问题。添加新项目时效果良好，但同时删除多个项目时，项目会从集合内部而不是背面删除。换句话说，这些项目的删除顺序与我预期的相反。

HTML:

<div ng-controller="CompaniesCtrl">
  <h2>Companies</h2>
  <button ng-click="add()">Add</button>
  <button ng-click="remove()">Remove</button>
  <ul>
      <li class="company" ng-repeat="company in companies">
          <div>
              <h4>{{company.name}}</h4>
              <p>{{company.description}}</p>
          </div>
      </li>
  </ul>
</div>

JavaScript:

function CompaniesCtrl($scope) {
  $scope.companies = [
        { name: "Company A", description: 'A software vendor' },
        { name: "Company B", description: 'Another software vendor' },
        { name: "Company C", description: 'A software consultancy shop' },
        { name: "Company D", description: 'Another software consultancy shop' }
    ];
    $scope.add = function () {
        $scope.companies.push({ name: "Another company", description: 'Another software consultancy shop' });
        $scope.companies.push({ name: "Another company", description: 'Another software consultancy shop' });
        $scope.companies.push({ name: "Another company", description: 'Another software consultancy shop' });
    };
    $scope.remove = function () {
        $scope.companies.splice($scope.companies.length - 3, 3);
    };
}

CSS：

.company {
    background-color: red;
    margin: 10px;
    padding: 10px;
}
.company.ng-enter-stagger, .company.ng-leave-stagger, .repeat-animation.ng-move-stagger {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
    -webkit-transition-duration: 0;
    transition-duration: 0;
}
.company.ng-enter {
    -webkit-transition:0.2s linear all;
    transition:0.2s linear all;
    opacity: 0;
    -webkit-transform:scale(1.15)!important;
    transform:scale(1.15)!important;
}
.company.ng-enter.ng-enter-active {
    opacity: 1;
    -webkit-transform:scale(1)!important;
    transform:scale(1)!important;
}
.company.ng-leave {
    -webkit-transition:0.1s linear all;
    transition:0.1s linear all;
    opacity: 1;
}
.company.ng-leave.ng-leave-active {
    opacity: 0;
}

我在这里创建了一个JSFiddle来记录这个问题：http://jsfiddle.net/VNB7R/

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

Answer 1

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

这里有一个技巧，您可以使用$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);
    }

Fiddle改良样品

Answer 2

这里有一种解决方法，尽管这在很大程度上是一种破解！

我更改了angular.js文件（1.2.16版），在20033行添加了以下代码：

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;

第一个代码片段用要删除的元素总数的信息标记元素。在"离开"动画的情况下，第二个代码片段反转用于确定移除顺序的索引。

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