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引起的，是一个相对较旧的新闻 。

你可以在这里追踪

Answer 2

使用有角度的承诺。 您的$ defer对象应在动画结束后解决； 然后从ng-repeat显示的数组中删除您的项目。

总结：首先做动画，然后（按承诺解决）删除您的元素。

在这里，您有$ q（延期）对象文档： https : //docs.angularjs.org/api/ng/service/ $ q

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

通过执行动画之前删除项目来解决您的问题。 您对不存在的数组项目执行动画。