ng-repeat 上的错误动画（动画错误的元素）

Question

我为 ng-repeat 项目添加了一些关于删除元素的动画，接下来是它复制列表的最后一个元素并在其上应用动画而不是删除的元素。

为什么动画没有应用到删除的元素上，而是应用到最后一个复制的元素上？

控制器:

$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

使用angular promises。你的 $defer 对象应该在动画结束后解决；然后从 ng-repeat 显示的数组中删除你的项目。

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

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

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

您的问题是在执行动画之前删除项目引起的。您对不存在的数组项执行动画。

Answer 2

问题是由track by $index引起的，是比较老的news。

你可以跟踪一下here

ng-repeat 上的错误动画（动画错误的元素）

buggy animation on ng-repeat (animates wrong element)

javascript

angularjs

animation

angularjs-ng-repeat

ng-animate