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

Posted 2023-03-06

【中文标题】为啥在 ng-repeat 列表中 unshift() 而不是 shift() 会发生 CSS 转换？

【英文标题】：Why do CSS transitions occur for unshift() and not for shift() in ng-repeat lists?为什么在 ng-repeat 列表中 unshift() 而不是 shift() 会发生 CSS 转换？

【发布时间】：2015-04-13 14:04:03

【问题描述】：

我正在使用 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 没有成功。非常感谢。

【参考方案1】：

很好奇。

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

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

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

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

Demo

【讨论】：

确实这似乎有效。这是一个小提琴，展示了更像我实际在做的事情。不过，我无法让它在我的应用程序中工作。 jsfiddle.net/isherwood/w123q5na/5

宾果游戏。我的模板中留下了一个track by 声明，它把事情搞砸了。谢谢！

【参考方案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

【讨论】：

这似乎可行，但它需要更改数据模型，不是吗？

【参考方案3】：

我想我理解你的问题。

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

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

仍然让我感到困惑的是，为什么 Asok 的解决方案会按照您的预期工作。当我想到一个原因时，我会编辑。