animation - Angularjs ng-animate 移动示例？

Question

我似乎无法让 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;}

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

score 14 · Accepted Answer

我把它弄乱了，并使用了下一个同级 css 选择器+ （小提琴）。显然，move动画应用于第一个移动元素和下一个更改的元素之间的所有元素，但不适用于最后更改的元素。

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

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

score 8 · Accepted Answer

根据文档：

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

要触发移动动画，您需要重新排序项目，如以下jsfiddle 示例所示：

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

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

2 回答 2