Question

我使用交错功能进行角度动画（https://docs.angularjs.org/api/ngAnimate#css-staggering-animations）。

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

我创建了一个Plunker来展示我正在谈论的内容：http://plnkr.co/edit/xlVps9v0iINV11CYlUhG

如果您点击＆＃34;添加项目＆＃34;然后一切都很好。如果单击＆＃34;删除项目＆＃34;然后一切都开始崩溃，交错的效果变成了癫痫的噩梦。

我认为重复指令的工作原理可能没有解决方法。

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

在使用角度动画从DOM中删除之前等待所有动画完成

1 个答案: