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

问题是由track by $index造成的，并且相对较旧news。

您可以跟踪它here

Answer 2

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

总结：首先做动画THEN（在承诺解决时）删除你的元素。

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

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

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

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

2 个答案: