在 AngularJS ngRepeat 中动画 ng-move 动画错误的项目答案

【问题标题】：Animating ng-move in AngularJS ngRepeat is animating the wrong items在 AngularJS ngRepeat 中动画 ng-move 动画错误的项目
【发布时间】：2015-04-11 10:07:57
【问题描述】：

在 ng-repeat 中为 ng-move 设置动画时，我有点困惑。例如，如果我将数组项从 3 移动到 7，则项 4-7 会向上移动并且它们会生成动画。但是，我从 3 移动并放置在位置 7 的实际项目没有。这是一个演示我的问题的 plunkr。

http://plnkr.co/edit/4yRkLWbsU57YxrYOrWUQ?p=preview

但是，将第 7 项移动到第 3 项，按我的预期工作，为单个移动的项目设置动画，而不是为被下推的项目设置动画。

这对于向用户显示移动的内容不是很有用。应该如何正确地为 ng-move 设置动画？

【问题讨论】：

克里斯，这方面有进展吗？
不，抱歉。我最终在 github 上找到了这个问题，但我从来没有得到令人满意的行动方案。 github.com/angular/angular.js/issues/5160
赞成使用（被高度低估的）术语“flummoxed”

标签： angularjs angularjs-ng-repeat ng-animate

【解决方案1】：

@tasseKat 有一个很好的答案，它解释了您观察到的行为：https://stackoverflow.com/a/27616435/1652643

然而，他的解决方案并不像你希望的那么简单......但到目前为止我还没有找到更好的解决方案。

【讨论】：

【解决方案2】：

正确的语法是

arrayVar.splice(to, 0, arrayVar.splice(from, 1));

要删除并返回数组arr 的索引i 处的元素，请使用arr.splice(i, 1)，

【讨论】：

感谢您的快速回答。不幸的是，这似乎奏效了，因为它触发了 ng-enter 和 ng-leave。我更新了 plunkr 以不同方式显示动画。
@Chris 我没明白。我认为我的修复仍然有效。你不需要[0]
通过返回array.splice(i, 1)，你返回的是一个数组，而不是元素。这会触发 ng-leave/ng-enter，而不是 AngularJS 中的 ng-move 转换。 plunkr 只是我可以做的最简单的例子来说明 ng-move（它实际上是在我的真实代码中的排序过程中触发的）没有为实际移动的项目设置动画。我更新了 plunkr 以将离开/进入/移动显示为红色/绿色/蓝色。我的问题是蓝色动画。很抱歉造成混乱。