Блог

Главная - Вопросы по программированию - Подождите, пока все анимации не завершатся, прежде чем удалять из DOM с помощью Angular Animation

Подождите, пока все анимации не завершатся, прежде чем удалять из DOM с помощью Angular Animation

#angularjs #animation #angularjs-ng-repeat #angularjs-animation

#angularjs ( ангулярджс ) #Анимация #angularjs-ng-repeat #angularjs-анимация #angularjs

Вопрос:

Я использую ступенчатую функцию для угловой анимации (https://docs.angularjs.org/api/ngAnimate#css-staggering-animations).

Есть ли способ, которым я могу использовать это, а также сделать так, чтобы элементы не удалялись из DOM до тех пор, пока все анимации не будут завершены?

Я создал Плунжер, показывающий, о чем я говорю:http://plnkr.co/edit/xlVps9v0iINV11CYlUhG

Если вы нажмете «Добавить элементы», то все выглядит нормально. Если вы нажмете «Удалить элементы», все начнет рушиться, и эффект в шахматном порядке превратится в эпилептический кошмар.

Я полагаю, что в зависимости от того, как работает директива repeat, обходного пути может и не быть.

Ответ №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 мог правильно отобразить изменения.

проверьте плунжер