gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 18:12:11 27 4
gpt4 key购买 nike

我在元素中使用 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com