Angular ng-repeat，重新排序动画幻灯片答案

【问题标题】：Angular ng-repeat, reordering animation slidesAngular ng-repeat，重新排序动画幻灯片
【发布时间】：2016-09-02 13:48:10
【问题描述】：

我有一个角度旋转木马滑块，我有 orderBy:'id' 的 ng-repeat 并且当我单击下一个幻灯片按钮时，我会更改它。

看看我的 JSFiddle here

我有带有 ng-repeat 的 div：

<div class="slide" ng-repeat="slide in slides | orderBy:'id*1'">
    <p>
      {{ slide.value.name }}
    </p>
</div>

我有对新项目列表进行排序的功能：

$scope.nextSlide = () => {
  let items = $scope.slides
  let countItems = items.length

  for (let i = 0; i < countItems; i++) {
    let z = items[i].id % countItems;
    items[i].id = z + (countItems - 1);
  }
}

还有我的问题：

首先发生动画，然后作用域新的排序项并闪烁到新幻灯片。有任何想法吗？如何在ng-repeat 中进行动画重新排序？

【问题讨论】：

您的 jsfiddle 似乎没有重现这种不良行为。如果您尝试并获得它，它将更容易提供帮助

标签： javascript html css angularjs

【解决方案1】：

您为什么不先重新排序，以便第一张幻灯片按“正常”顺序排列，当您单击下一步时，会显示“重新排序”的幻灯片...

我只是不明白你为什么要在“next()”上重新排序

【讨论】：

我重新排列了我的列表，因为第一张幻灯片必须转到最后一项，这个滑块必须是轮播 :(
好的，我现在明白了。

【解决方案2】：

我认为你处理动画的方式不对。假设您有 2 个项目始终可见。 1 | 2 | 3 | 4

当您单击下一步时，它应该： - 向左滑动（动画） - 然后，一旦动画完成，您就可以：
- 重新排序项目（2 个在后面）并且 - 同时 - 重新排列列表。

我认为在您的小型演示中，您只是忘记了重新定位列表。我想这也取决于你制作动画的方式。

【讨论】：