AngularJS 1.3 ng-repeat 动画移动项目不起作用答案

【问题标题】：AngularJS 1.3 ng-repeat animate move items not workingAngularJS 1.3 ng-repeat 动画移动项目不起作用
【发布时间】：2014-12-25 05:28:48
【问题描述】：

我有一个项目列表（div），当我点击其中任何一个时，我需要它们（带有动画）移动到列表的顶部。但是，移动动画对我不起作用。 HTML 代码：

    <body ng-controller="myCtrl">
<div ng-init="items=[1,2,3,4,5,6,7,8,9]">
    <div data-ng-repeat="item in items track by $index" 
        ng-click="move2Top($index)"
        class="my-repeat-animation boxy">
        {{item}}
    </div>
</div>
</body>

Javascript 控制器（包含一个用于将数组元素推送到数组顶部的数组原型方法）

var myApp = angular.module("MyApp", ["ngAnimate"]);

myApp.controller('myCtrl', function($scope){
    $scope.move2Top = function (idx) {
        console.log('moving element ' + idx);
            if (idx > 0)
                $scope.items.moveToTop(idx);
        };

    Array.prototype.moveToTop = function(from) {
        this.splice(0, 0, this.splice(from, 1)[0]);
    };
});

还有 CSS：

.my-repeat-animation.ng-enter, 
.my-repeat-animation.ng-leave, 
.my-repeat-animation.ng-move {
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;
  position:relative;
}

.my-repeat-animation.ng-enter {
  left:-10px;
  opacity:0;
}
.my-repeat-animation.ng-enter.ng-enter-active {
  left:0;
  opacity:1;
}

.my-repeat-animation.ng-leave {
  left:0;
  opacity:1;
}
.my-repeat-animation.ng-leave.ng-leave-active {
  left:-10px;
  opacity:0;
}

.my-repeat-animation.ng-move {
  opacity:0.5;
}
.my-repeat-animation.ng-move.ng-move-active {
  opacity:1;
}

.boxy {
  border: solid 1px;
  margin: 3px;
  padding: 3px;
  border-radius: 4px;
  width: 30px;
  text-align: center;
}

请看示例： http://plnkr.co/edit/asHtC5WOt9qnePyzPqk5?p=preview

动画移动根本不起作用。

【问题讨论】：

你能把问题中的css贴出来吗？
好了，我编辑了问题并添加了 CSS。谢谢。
一种方法here。您需要删除 track by $index 并在您的情况下使用超时，因为您使用的是原语。我在另一个答案中对此进行了解释，您可以see here。
另一个延迟进入动画直到离开完成的版本jsbin.com/sasesucaku/1/edit?html,css,js,output
感谢 PSL。我正在查看您在另一个堆栈溢出主题中提供的第二个示例，此处为 plnkr.co/edit/zlspBR?p=preview。因此，当您单击列表中的某个项目时，它确实会移动。其他示例实际上确实离开并进入。但我不知道如何在我的示例中复制此运动动作。我根本看不到是什么触发了移动动作而不是离开-进入动作。

标签： angularjs animation ng-repeat

【解决方案1】：

我认为这与您的Array.prototype 函数有关。如果您在$scope.move2Top 中进行拼接，它会起作用，至少在我的示例中是这样。

var myApp = angular.module("MyApp", ["ngAnimate"]);

myApp.controller('myCtrl', function($scope){
    $scope.move2Top = function (idx) {
    console.log('moving element ' + idx);
    if (idx > 0)
        $scope.items.splice(0, 0, $scope.items.splice(idx, 1)[0]);
    };
});

http://plnkr.co/edit/H5UpIZoqIMnJofz0mndL?p=preview

【讨论】：

这似乎是离开和进入。不动。或者我脑子里有一个错误的画面，应该如何移动。我希望移动元素“飞过”其余元素到第一个位置。
@MilošStanić 我使用的是 1.3.11 版本，我遇到了同样的问题。 ' var temp = vm.step.ruleAssignments[destination]; vm.step.ruleAssignments.splice(destination,1); vm.step.ruleAssignments.splice(origin,0,temp);'不会导致 ng-animate 为 move 事件触发。过滤数组会触发动画，删除项目也会触发。我认为这是使用 $index 的问题
Brandon 在您向您添加轨道的那一刻 plnkr 它停止为移动动画工作。

【解决方案2】：

也许你可以参考堆栈上的这个问题。这可能与您想要实现的目标相似。 Animating ng-move in AngularJS ngRepeat is animating the wrong items

它并不完整，但它可能会给你一些想法或引导你走向正确的方向。

【讨论】：