angularjs - 等到所有动画完成后再使用 Angular 动画从 DOM 中移除

Question

我正在使用 Angular 动画的交错功能（https://docs.angularjs.org/api/ngAnimate#css-staggering-animations）。

有没有一种方法可以使用它，并且在所有动画完成之前不会从 DOM 中删除项目？

我创建了一个 Plunker，显示我在说什么：http ://plnkr.co/edit/xlVps9v0iINV11CYlUhG

如果您单击“添加项目”，那么一切看起来都很好。如果您单击“删除项目”，那么一切都开始崩溃，交错的效果变成了癫痫的噩梦。

我想根据重复指令的工作原理，可能没有解决方法。

Answer 1

var app = angular.module('plunker', ['ngAnimate']);

app.controller('MainCtrl', function($scope,$interval) {
  $scope.name = 'World';

  $scope.items = [];

  $scope.addItems = function () {
    for (var i = 0; i < 100; i++) {
      $scope.items.push({ cls: 'class' + (i % 3) });
    }
  };

  $scope.removeItems = function () {
    var k=100;
    $interval(function(){
      $scope.items.splice(k, 1);  
      k--;
    }, 10,100);


  };

});

我建议更改 Sinterval 的 for 语句，似乎 for 语句对于 DOM 来说太快而无法正确呈现更改。

检查plunker