Дождитесь завершения всех анимаций перед удалением из DOM с угловой анимацией

Question

Я использую функцию в шахматном порядке для угловой анимации ( https://docs.angularjs.org/api/ngAnimate).

Есть ли способ, которым я могу использовать это, а также чтобы элементы не удалялись из 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);


  };

});

Я бы предложил изменить оператор for для Sinterval, похоже, что оператор for слишком быстр, чтобы DOM правильно отображал изменения.

проверить поршень