如何在AngularJS中使用ng-leave-stagger動畫

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/

是THI是一個已知的問題，或者我在我的JS代碼或CSS中做錯了什麼？

Answer 1

我相信這是動畫庫的工作原理。它不知道什麼已經被刪除或添加它只是重新呈現數組。

這裏是一個技巧，你可以申請模仿相同的行爲使用$超時。

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 Modified Sample

Answer 2

這裏是解決它的一種方式，但它是非常一個黑客！

我通過線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; }); } } 

可能有寫代碼更優雅的方式，但它編寫得儘可能緊湊，不會干擾周圍的代碼。

此外，下面的代碼必須以線1227加入到角animate.js文件（也版本1.2.16）：

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

第一代碼段與關於信息標誌着元件要移除的元素總數。第二個代碼片段在「離開」動畫的情況下反轉用於確定去除順序的索引。

這絕對是破解角度源文件的最後手段，但我看不到其他選擇。爲什麼它沒有被實施，首先我不明白這一點。另外，我不知道這些更改是否引入了一些錯誤或意外行爲，但看起來工作正常。