Angularjs ng-animate 移动示例？答案

【问题标题】：Angularjs ng-animate move example?Angularjs ng-animate 移动示例？
【发布时间】：2014-04-10 08:00:40
【问题描述】：

我似乎无法让 angularjs ng-animate 开始工作，而且在野外似乎也没有任何示例。以演示小提琴为例： http://jsfiddle.net/yfajy/

像下面这样向css添加移动指令在过滤列表时不会产生任何动画效果：

.example-repeat-move-setup {  opacity:1;
  color:red }
.example-repeat-move-setup.example-repeat-move-start {   opacity:1;
  color:black;}

有人可以发布一个工作示例吗？

【问题讨论】：

【解决方案1】：

我得到了它的一些混乱和使用下一个兄弟 css 选择器+(fiddle)。显然，move 动画应用于第一个移动元素和下一个更改的元素之间的所有元素，但不适用于最后更改的元素。

您可以在this fiddle 中看到我交换了两个相隔 4 个空格的人，移动动画应用于元素 0、1、2 和 3 但不是 4，即使我只交换了元素 0 和 4。下一个兄弟选择器覆盖为元素 1、2 和 3 设置的值，并且是唯一应用于 4 的样式。

在this fiddle 你真的可以看到，有一个按钮将第 6 个元素替换为第 3 个元素，并将新人放在第 1 个和第 3 个元素中。第 1 和第 3 位获得进入动画，而第 4 和第 5 位获得移动动画，第 6 位没有任何内容，即使第 6 位是唯一一个有移动的人的位置。

【讨论】：

谢谢。 Updated fiddle Angular 1.3，如果有人需要的话。我也遇到过this answer (fiddle)，它从动画的角度来看效果很好，但它的实现方式并不理想。现在这在 Angular 中应该会容易得多。

【解决方案2】：

根据documentation：

所以过滤进出项目只会触发进出动画，不会触发移动动画。

要触发移动动画，您需要重新排序项目，如jsfiddle example：

$scope.shuffle = function() {
    $scope.friends = _($scope.friends).shuffle();
}

您可能还想查看有关 ngAnimate 的更深入的解释：

【讨论】：