css - Ng-repeat removal 和 Ng-style modification 不是同时进行的

Question

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

这是在 transform 属性上使用 CSS 动画完成的。一开始，元素并没有真正从 ng-repeat 列表中删除(在不透明度属性上有一个动画)。

有一次，我实际上应该从列表中删除该元素。并且，与此同时，我需要将其他元素的动画回退，这些元素被人为地放得太高了。

这是 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)。

Answer 1

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

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