Question

我正在使用项目中的ngAnimate模块在某个条件下为列表中的项目添加动画。问题是如果我使用ngAnimate那么从列表中删除比没有动画需要更多的时间。 Please check the plunker I've created.

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

<强> Demo

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

1 个答案: