4

I have a list of items (divs) and when I click on any of them I need them to move (with animation) to the top of the list. However, move animation is not working for me. HTML code: 

    <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 controller (contains an Array prototype method for pushing array element to top of array)

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]);
    };
});

And the 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;
}

Please take a look at the example: http://plnkr.co/edit/asHtC5WOt9qnePyzPqk5?p=preview

Animated move simply doesn't work.

Miloš Stanić
  • 460
  • 1
  • 6
  • 13
  • Can you post the css in the question? – PSL Oct 29 '14 at 13:39
  • There you go, I edited the question and added CSS. Thanks. – Miloš Stanić Oct 29 '14 at 13:43
  • One way to do it **[here](http://jsbin.com/gidamarana/1/edit)**. You would need to remove `track by $index` and use a timeout in your case since you are using primitives. I have provided an explanation for this in another answer you can **[see here](http://stackoverflow.com/questions/26132947/how-to-trigger-an-ng-move-with-angular-animate-when-reordering-an-array/26132996#26132996)**. – PSL Oct 29 '14 at 14:10
  • Another version delaying enter animation till leave is complete http://jsbin.com/sasesucaku/1/edit?html,css,js,output – PSL Oct 29 '14 at 14:45
  • Thanks PSL. I was looking at the second example you provided on the other stack overflow topic, here http://plnkr.co/edit/zlspBR?p=preview . So when you click an item in the list, it really moves. Other examples actually do leave and enter. But I don't know how to replicate this movement action in my example. I simply don't see what triggers the move action instead of leave-enter action. – Miloš Stanić Oct 29 '14 at 18:38
  • Did you check my demo link (jsbin) above? i can't access plnkr unfortly – PSL Oct 29 '14 at 18:55
  • Yes, I did, and as I said, it does leave-enter action, not move. – Miloš Stanić Oct 29 '14 at 21:59

2 Answers2

0

I think that this has to do with your Array.prototype function. If you do the splicing in $scope.move2Top it works, at least in my example.

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

mskfisher
  • 3,291
  • 4
  • 35
  • 48
Brandon O'Casey
  • 1
  • 1
    This seems to do leave and enter. Not move. Or I am having a wrong picture in my head how moving should look. I would like the moving element to "fly over" the rest of the elements to the first position. – Miloš Stanić Oct 29 '14 at 18:26
  • @MilošStanić I'm on version 1.3.11 and I'm having the same issue. ' var temp = vm.step.ruleAssignments[destination]; vm.step.ruleAssignments.splice(destination,1); vm.step.ruleAssignments.splice(origin,0,temp);' does not cause ng-animate to fire for the move event. filtering the array fires the animation and so does deleting items. I think it's using the $index that is the problem – Doug Chamberlain Jul 28 '16 at 20:01
  • Brandon the moment you add track by to you plnkr it stops working for move animations. – Doug Chamberlain Jul 28 '16 at 20:16
0

Maybe you can refer to this question on stack. This is possibly similar what you are trying to achieve. Animating ng-move in AngularJS ngRepeat is animating the wrong items

It is not complete but it might give you some idea or lead you in right direction.

Community
  • 1
  • 1
newDevGeek
  • 363
  • 2
  • 18