バグのアニメーションでng-repeat（間違った要素をアニメート）

Question

ng-repeatの要素の削除にアニメーションを追加しました。リストの最後の要素を複製し、削除したものの代わりにアニメーションを適用します。

アニメーションが削除された要素に適用されないのはなぜですか？最後に複製された要素にアニメーションが適用されるのはなぜですか？

完全なコード例：https://jsfiddle.net/8bhyv1b4/

コントローラ：

$scope.selectedImgs = []; 

$scope.deleteImg = function() { 
    $scope.selectedImgs.forEach(function(selectedImgIndex, i) { 
    // remove image by index 
    $scope.imgs.splice(selectedImgIndex - i, 1); 
    }); 
    $scope.selectedImgs = []; 
} 

$scope.toggleImg = function(index) { 
    var i = $scope.selectedImgs.indexOf(index); 
    if (i + 1) { 
    $scope.selectedImgs.splice(i, 1); 
    } else { 
    $scope.selectedImgs.push(index); 
    $scope.selectedImgs.sort(function sortNumber(a, b) { 
     return a - b; 
    }); 
    } 
    $scope.$apply(); 
} 

テンプレート：

<section class="txtcent"> 
    <img-row class="blk clearfix" size="imgs.length" ontoggle="toggleImg" selected="selectedImgs"> 
    <section ng-repeat="url in imgs track by $index" class="inlblk frameimg"> 
     <div> 
     <img width="150" ng-src="{{url}}" /> 
     </div> 
    </section> 
    </img-row> 
    <span class="noimgmsg" ng-if="!imgs.length">Add images</span> 
</section> 

CSS：

.frameimg.ng-leave{ 
    -webkit-animation: 3s removeImgItem; 
} 
@-webkit-keyframes removeImgItem { 
    0% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0; 
    } 
} 

は

Answer 1

問題はtrack by $indexによって引き起こされ、比較的古いnewsです。

トラックを保存することができますhere

Answer 2

は角約束を使用し、あなたの種類の助けに感謝します。あなたの$ deferオブジェクトは、アニメーションの終了後に解決されるべきです。 ng-repeatが表示されている配列から項目を削除します。

合計：最初にアニメーションを実行します（約束したら解決します）。要素を削除します。

ここでは、$ Q（据え置き）オブジェクトのドキュメントを持っている： https://docs.angularjs.org/api/ng/service/ $ qを

promiseOfFinishedAnimation.then(function() { 
    deleteElementFromArrayThatNGRepeatDisplays(); 
}); 

あなたの問題は、アニメーションが実行される前に、項目を削除することによりcousedされます。存在しない配列項目に対してアニメーションを実行します。