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

AngularJS - Deletion from list lags when using ngAnimate

本文关键字：删除 滞后 列表 使用 ngAnimate AngularJS-      更新时间：2023-09-26

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

这是我的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);
 };
}]);

从第一个列表中删除操作快速且响应迅速。从第二个列表中删除会让人感觉迟缓和反应迟钝。我使用的实现与代码中的第二个列表类似。有什么办法我能修好吗？

当模块中包含ngAnimate时，ng重复添加、删除等会在受影响的元素上添加类，以便为动画类添加转换。当您在原始类中提到过渡时，这将适用，ngAnimate将等待那么长的持续时间（假设动画发生在受影响的元素上），然后从DOM中删除该元素。但是，尚未为ng个重复动画类指定任何动画。所以，当元素被移除时，就会出现延迟行为。由于从重复中删除项目不需要任何动画，因此只需通过覆盖动画类的规则来关闭动画即可。

尝试添加这些：-

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

演示

相关文章：