Ng 重复去除和 Ng 样式修改不是同时的答案

【问题标题】：Ng-repeat removal and Ng-style modification are not simultaneousNg 重复去除和 Ng 样式修改不是同时的
【发布时间】：2016-04-27 19:50:15
【问题描述】：

我正在尝试在 ng-repeat 列表上实现自定义动画。当一个元素被移除时，它下面的所有元素都会上升。

这是在 transform 属性上使用 CSS 动画完成的。一开始，该元素并没有真正从 ng-repeat 列表中删除（在 opacity 属性上有一个动画）。

在某一时刻，我实际上应该从列表中删除该元素。而且，与此同时，我需要回退其他元素上的动画，这些元素被人为设置得太高了。

这是 HTML：

<div ng-repeat="card in cards" ng-style="shouldBeUpped ? uppedStyle : ''">...</div>

这里是 JS：

$timeout(function() {
        $scope.shouldBeUpped = false;
        $scope.cards.splice(index, 1);
    }, 1000);

问题是$scope.cards.splice(index, 1); 和$scope.shouldBeUpped = false; 不是同时的。有一点明显的延迟（可能是 20 或 30 毫秒），看起来很糟糕，因为与此同时屏幕上有一个空白区域（$scope.shouldBeUpped = false; 在$scope.cards.splice(index, 1); 之前呈现）。

你知道我能做什么吗？

我听说过 ng-leave 和 ng-move 类，但是我在网上找到的示例对我不起作用...（我使用的是 Angular 1.4）。

【问题讨论】：

尝试创建简单的 plunk/fiddle。（顺便说一句，在 $timeout 中调用 apply 没有意义。）

标签： css angularjs ionic-framework ng-animate

【解决方案1】：

我认为你的问题是 $timeout。你在那里增加了 1 秒的延迟。

我不确定 view 如何知道 $scope.shouldBeUpped = false;早于 $scope.cards.splice(index, 1);因为所有更改都会在 $scope.$apply()

时反映出来

【讨论】：

我需要一个 $timeout 因为我想在实际删除元素之前等待 CSS 动画结束。
@Arnaud 是什么触发了你的动画？我以为 $scope.shouldBeUpped = false;是吗？