Angularjs ng-animate移动示例？

Question

我似乎无法在上班途中获得有角度的动画,而且在野外也似乎没有任何例子.以演示小提琴为例: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;}

有人可以发布一个实例吗？

Answer 1

我得到它与一些搞乱使用下一个兄弟css选择器+ (小提琴).显然,move动画应用于第一个移动元素和倒数第二个元素之间的所有元素,但不应用于最后一个更改元素.

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

在这个小提琴中,你可以真正看到它,有一个按钮用第3个元素取代第6个元素,并将新人放在第1个和第3个.第1和第3个获得输入动画,而第4个和第5个获得移动动画,第6个获得任何内容,即使第6个位置是唯一一个移动的人.

Answer 2

有一篇非常好的文章,教程如下:

Answer 3

根据文件:

因此,过滤和退出项目只会触发进入和离开动画,而不是移动动画.

要触发移动动画,您需要重新排序项目,如此jsfiddle示例中所示:

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

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