Question

我有一个项目列表（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

动画动作根本不起作用。

Answer 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

Answer 2

也许你可以在堆栈上引用这个问题。这可能与您尝试实现的类似。 Animating ng-move in AngularJS ngRepeat is animating the wrong items

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

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

2 个答案: