我在元素中使用 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);
};
}]);
从第一个列表中删除是快速且响应迅速的。从第二个列表中删除感觉很滞后且 react 迟钝。我正在使用类似于代码中第二个列表的实现。有什么办法可以解决吗？
最佳答案
当您的模块中包含 ngAnimate 时，ng-repeat 添加、删除等将在受影响的元素上添加类，以便为动画类添加过渡。当您在原始类中提到转换时，这将适用，ngAnimate 将等待足够长的时间(假设动画发生在受影响的元素上)，然后再从 DOM 中删除元素。但您尚未为 ng-repeat 动画类指定任何动画。因此，您会看到删除元素时发生延迟的行为。由于您不需要任何动画来从重复中删除元素，因此只需通过覆盖动画类的规则来关闭动画即可。
尝试添加这些:-
.animated.ng-move,
.animated.ng-enter,
.animated.ng-leave {
-webkit-animation-duration: 0s;
animation-duration: 0s;
}
<强> Demo
关于javascript - AngularJS - 使用 ngAnimate 时从列表中删除滞后，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26385104/