Animation Angularjs ng动画移动示例?

Animation Angularjs ng动画移动示例?,animation,angularjs,Animation,Angularjs,我似乎无法让angularjs ng在工作中进行动画制作,在野外也没有任何例子。以演示小提琴为例: 在筛选列表时,向css添加移动指令(如以下所示)不会产生任何动画效果: .example-repeat-move-setup { opacity:1; color:red } .example-repeat-move-setup.example-repeat-move-start { opacity:1; color:black;} 有人可以发布一个工作示例吗?请点击: 输入-

我似乎无法让angularjs ng在工作中进行动画制作,在野外也没有任何例子。以演示小提琴为例:

在筛选列表时,向css添加移动指令(如以下所示)不会产生任何动画效果:

.example-repeat-move-setup {  opacity:1;
  color:red }
.example-repeat-move-setup.example-repeat-move-start {   opacity:1;
  color:black;}
有人可以发布一个工作示例吗?

请点击:

  • 输入-将新项目添加到列表中或删除项目时 过滤后显示
  • 离开-从列表中删除项目时 或者当一个项目被过滤掉时
  • 移动-当相邻项目移动时 过滤掉导致重新排序或当项目内容 重新排序
因此,过滤输入和输出项只会触发输入和输出动画,而不会触发移动动画

要触发移动动画,需要对项目进行重新排序,如下所示:

您可能还想查看有关ngAnimate的更深入的说明:


我使用了一些混乱的东西,并使用了下一个同级css选择器
+
。显然,
移动
动画应用于第一个移动的元素和下一个最后更改的元素之间的所有元素,但不应用于最后更改的元素

您可以看到,在我将两个人相隔4个空间交换的地方,移动动画应用于元素0、1、2和3,而不是4,即使我只交换了元素0和4。下一个同级选择器将覆盖为元素1、2和3设置的值,并且是应用于4的唯一样式

在你可以看到的地方,有一个按钮将第6个元素替换为第3个元素,并将新成员放在第1和第3位。第1和第3个位置获得进入动画,第4和第5个位置获得移动动画,第6个位置什么也得不到,即使第6个位置是唯一一个包含移动人物的位置

谢谢。对于Angular 1.3,如果有人需要。我还遇到过(),从动画的角度来看,它的效果非常好,但它的实现方式并不理想。到目前为止,这在Angular中应该会容易得多。
$scope.shuffle = function() {
    $scope.friends = _($scope.friends).shuffle();
}