为什么 CSS 转换发生在 unshift() 而不是 ng-repeat 列表中的 shift()？

Question

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

但是，如果我使用 shift 来更新数组，则 DOM 会立即更新，没有任何转换。

Here's a demo 一种方法，除了过渡之外，所有方法都按预期工作。比较使用这两个按钮时的行为。

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

Here's another demo 另一种方法，其中转换有效，但每次函数运行时数组都会丢失一个元素。

$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?

中的参考问题

注意：在我下面的 fiddle 中，在玩游戏的同时我也对你的 ng-class 和 css 进行了更改，但它仍然与你的第一个演示 [=27] =].

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

我想我明白你的问题了。

在您的第一个"faulty"演示中，您可以看到当您按下"Slide up"时，Item One确实会淡出，但它出现在页面底部！那是因为您将它添加为最后一个元素，然后它才开始过渡。

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

仍然让我感到困惑的是，为什么 Asok 的解决方案会以您期望的方式工作。想到原因再编辑。

为什么 CSS 转换发生在 unshift() 而不是 ng-repeat 列表中的 shift()？

Why do CSS transitions occur for unshift() and not for shift() in ng-repeat lists?

javascript

arrays

css-transitions

angularjs

angularjs-ng-repeat