AngularJS-使用ngAnimate时从列表滞后中删除

Question

我在项目中使用ngAnimate模块在特定条件下为列表中的项目设置动画。 问题是如果我使用ngAnimate那么从列表中删除要比没有动画花费更多的时间。 请检查我创建的插件。

这是我的HTML：

<body ng-app="JU">
<div ng-app ng-controller="MyCtrl">
  <h3>Non Laggin List</h3>
  <ul>
    <li ng-repeat="i in items" class="">{{i}}<button ng-click="remove($index)">Delete</button></li>
  </ul>
  <br/>
  <h3>Lagging List</h3>
  <ul>
    <li ng-repeat="i in items2" class="animated error">{{i}}<button ng-click="remove2($index)">Delete</button></li>
  </ul>
</div>

JS：

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

JU.controller('MyCtrl', ['$scope', function ($scope) {
 $scope.items = [
   'Hello',
   'Click',
   'To Delete',
   'ME from',
   'This list'
 ];
 $scope.items2 = [
   'Hello',
   'Click',
   'To Delete',
   'ME from',
   'This list'
 ];
 $scope.remove = function (index) {
     $scope.items.splice(index, 1);
 };
 $scope.remove2 = function (index) {
     $scope.items2.splice(index, 1);
 };
}]);

从第一个列表中删除是快速且响应迅速的。 从第二个列表中删除感觉很漫长，反应迟钝。 我正在使用类似于代码中第二个列表的实现。 有办法解决吗？

Answer 1

当您的模块中包含ngAnimate ，ng-repeat添加，删除等操作将在受影响的元素上添加类，以为动画类添加过渡。 当您在原始类中提到了转换时，此方法将适用。ngAnimate将等待那么长的时间（假设动画发生在受影响的元素上），然后才从DOM中删除该元素。 但是您尚未为ng-repeat动画类指定任何动画。 因此，您会看到在删除元素时发生了延迟行为。 由于不需要任何动画来删除重复项，因此只需通过覆盖动画类的规则来关闭动画。

尝试添加这些：

.animated.ng-move,
.animated.ng-enter,
.animated.ng-leave {
   -webkit-animation-duration: 0s;
  animation-duration: 0s;
}

演示