为什么在ng-repeat列表中对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()) );
};

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

注意：在下面的小提琴中，在玩弄时我还对您的ng-class和 css 进行了更改，但它仍然与您的第一个演示小提琴相同。

Demo