AngularJS: sharing two elements in ng repeater with animation

Question

I have a list of items, each of which has a unique id

$scope.arr = [{val:0,id:'a'},{val:1,id:'b'},{val:2,id:'c'}];

Each element is an absolute positioning according to their index $ index

<div class="item" ng-repeat="item in arr track by item.id" 
ng-style="getAbsPos($index)" >{{item.id}}</div>

All I wanted - an exchange arr[0]and arr[2]in the array and displays a moving animation of this action. It is very difficult.

I assume this css will work as the list is tracked by id

.item{
    transition:all 3000ms;
}

but somehow angular decides to move only one element and re-create another ( why ?! ). As a result, only one item is created.

= Question =

Is there a solution to solve this problem, so that both elements will be animated when they are replaced? Thank.

( , )

= . Plunker =

http://plnkr.co/edit/5AVhz81x3ZjzQFJKM0Iw?p=preview

Answer 1

, :

= =

• Zack , (item.x) , dom position

  <div class="item" ng-repeat="item in arr track by item.id" 
  ng-style="getAbsPos(item.x)" >{{item.id}}</div>
  

• , , dom item.x, $index, ;

   var a= arr[0];
   var c = arr[2];
   arr[0] = c;
   arr[2] = a; 
  

• item.x async- ( $timeout), angular 2 3 dom-, 3 .

   $timeout(function(){
       var tempX = a.x;
   a.x = c.x;
   c.x = tempX;           
   },10)   
  

. , ( ), , .

, , .

= - Plunker =

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

Answer 2

, $index. , .left . .left, - , - . JSFIDDLE.

HTML

<div class="item" ng-repeat="item in list" move-to="item.left">{{item.id}} / {{$index}}</div>

module.controller('myCtrl', function($scope) { 
$scope.list = [
        {val:0, id:'a', left: 0},
        {val:1, id:'b', left: 100},
        {val:2, id:'c', left: 200}
    ];

    $scope.swap = function() {
        var a_left = $scope.list[0].left
        $scope.list[0].left = $scope.list[2].left;
        $scope.list[2].left = a_left;
    }
}) 

.directive('moveTo', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            scope.$watch(attrs.moveTo, function(newVal) {
                elem.css('left', newVal + "px"); 
            });
        }
    }
});