为什么在ng重复列表中，unshift()和shift()会发生CSS转换

Question

我正在使用ng-repeat和CSS转换来移动页面中的一些元素。如果我使用unshift更改数据数组，则列表会很好地转换。（在我的应用程序中，我正在转换位置和不透明度。）

但是，如果我使用shift来更新数组，则DOM会立即更新，而不会发生转换。

这是一个方法的演示，除了过渡之外，所有方法都按预期工作。比较使用这两个按钮时的行为。

$scope.items.push( $scope.items.shift() );

这是另一个替代方法的演示，其中转换有效，但每次函数运行时数组都会丢失一个元素。

$scope.items.shift( $scope.items.push() );

其思想是，用户可以无限期地循环数组中的项目，并且CSS转换在两个方向上都发生。问题似乎是AngularJS在一种情况下更新了DOM，但在另一种情况中没有，尽管我无法在测试中证明这一点。

此外，根据我的一些阅读，我尝试使用track by item.id，但没有成功。非常感谢。

Answer 1

非常好奇。

我一直在尝试不同的可能解决方案，我发现一件事是，如果你把幻灯片改为：

$scope.slideUp = function() {
    $scope.items.push( angular.copy($scope.items.shift()) );
};

它将为第三个项目设置动画。所以这可能是angular内的一个参考问题？

注意：在我下面的小提琴中，当我四处演奏时，我也对你的ng-class和css进行了更改，但它仍然适用于你的第一个演示小提琴。

Demo

Answer 2

另一种方法是欺骗Angular的ng repeat，使其认为这是一个新对象，而不是每次都创建一个新的对象。

$scope.inc = 9;
$scope.slideUp = function() {
    var item = $scope.items.shift();
    item.id = $scope.inc++;
    $scope.items.push( item );
};
$scope.slideDown = function() {
    var item = $scope.items.pop();
    item.id = $scope.inc++;
    $scope.items.unshift( item );
};

我为每个对象添加了一个id属性，当我向上或向下滑动时递增，然后将ng repeat设置为按id:跟踪

Demo

Answer 3

我想我理解你的问题。

在您的第一个"故障"演示中，您可以看到，当您按下"向上滑动"时，Item One确实会淡出，但它会出现在页面底部！这是因为添加它作为最后一个元素，然后它才开始转换。

在Sliding down上，元素被向下推，因此你可以更直观地看到转换，即与前三个元素紧密耦合，但实际上也发生了同样的事情。

仍然让我困惑的是，为什么Asok的解决方案会像你所期望的那样工作。当我想到原因时，我会编辑。