I am using the ngAnimate module in my project to animate items in my list on a certain condition. The problem is if I use ngAnimate then deletion from list takes a little bit more time than without animation. Please check the plunker I've created.
This is my 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);
};
}]);
Deleting from the first list is fast and responsive. Deletion from the second list feels laggy and unresponsive. I am using an implementation similar to the second list in my code. Is there a way I can fix it?
When you have ngAnimate included in your module, ng-repeat addition, deletion etc will add classes on the affected element for adding transitions for the animated class. This will apply when you have transition mentioned in the original class, ngAnimate will wait for that much duration (assuming animation to happen on the affected element) before it removes the element from DOM. But you have not specified any animation for the ng-repeat animation classes. So you see that behavior of a delay happening when element is removed. Since you do not need any animation for removal of items from the repeat, just turnoff animation by overriding rules for animation classes.
Try adding these:-
.animated.ng-move,
.animated.ng-enter,
.animated.ng-leave {
-webkit-animation-duration: 0s;
animation-duration: 0s;
}