AngularJS 1.3 ng-repeat動畫移動項不起作用

我有一個項目列表（div），當我點擊其中的任何一個時，我需要它們移動（動畫）到列表頂部。但是，移動動畫不適合我。 HTML代碼：AngularJS 1.3 ng-repeat動畫移動項不起作用

<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

動畫移動根本不起作用。

來源

2014-10-29 Miloš Stanić

你可以在問題中發佈css嗎？ – PSL 2014-10-29 13:39:45

你去了，我編輯了問題並添加了CSS。謝謝。 – 2014-10-29 13:43:16

其中一種方法** [這裏]（http://jsbin.com/gidamarana/1/edit）**。您需要刪除'track by $ index'，並在您的情況下使用超時，因爲您使用的是基元。我在另一個答案中提供了一個解釋，你可以** [看到這裏]（http://stackoverflow.com/questions/26132947/how-to-trigger-an-ng-move-with-angular-animate-when -reordering-一個陣列/ 26132996＃26132996）**。 – PSL 2014-10-29 14:10:07

我認爲這與你的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

來源

2014-10-29 13:59:16

這似乎是離開並進入。不動。或者我頭腦中有一張錯誤的照片，應該看起來如何。我希望移動元素將其餘元素「飛」到第一個位置。 – 2014-10-29 18:26:58

@MilošStanić我在版本1.3.11和我有同樣的問題。 'var temp = vm.step.ruleAssignments [destination]; vm.step.ruleAssignments.splice（destination，1）; vm.step.ruleAssignments.splice（origin，0，temp）;'不會導致移動事件觸發無效。過濾數組會觸發動畫，刪除項目也會觸發動畫。我認爲這是使用$索引，這是問題 – 2016-07-28 20:01:28

布蘭登，當你添加跟蹤到你plnkr它停止工作移動動畫。 – 2016-07-28 20:16:47

也許你可以參考堆棧這個問題。這可能與您嘗試實現的類似。 Animating ng-move in AngularJS ngRepeat is animating the wrong items

這是不完整的，但它可能會給你一些想法或引導你在正確的方向。

來源

2014-10-29 14:02:29 newDevGeek

AngularJS 1.3 ng-repeat動畫移動項不起作用

回答

相關問題