Angularjs ng-animate move example?

Question

I don't seem to be able to get angularjs ng-animate on move to work and there also don't appear to be any examples in the wild. Take for example the demo fiddle: http://jsfiddle.net/yfajy/

Adding move instructions to the css like the following doesn't create any animation effect when filtering the list:

.example-repeat-move-setup {  opacity:1;
  color:red }
.example-repeat-move-setup.example-repeat-move-start {   opacity:1;
  color:black;}

Can someone post a working example?

score 14 · Answer 1 · answered May 29 '13 at 05:48

I got it working with some messing around and using the next sibling css selector + (fiddle). Apparently the move animation is applied to all elements between the first moved element and the next to last changed element, but not to the last changed element.

You can see in this fiddle where I swap two people 4 spaces apart that the move animation is applied to elements 0, 1, 2 and 3 but not 4, even though I only swapped elements 0 and 4. The next sibling selector overrides values set for both for elements 1, 2, and 3 and is the only style applied to 4.

In this fiddle you can really see it, there's a button that replaces the 6th element with the 3rd and puts new people in 1st and 3rd. 1st and 3rd get the enter animation while 4th and 5th get the move animation and 6th gets nothing, even though the 6th position is the only one with a moved person in it.

Thanks. [Updated fiddle](https://jsfiddle.net/2begw155/) for Angular 1.3 if anyone needs it. I have also come across [this answer](http://stackoverflow.com/questions/27507875/example-of-nganimate-for-smoothly-sorting-an-ng-repeat/27616435#27616435) ([fiddle](http://plnkr.co/edit/2Ramkg3sMW9pds9ZF1oc?p=preview)), which works really well from an animation perspective but the way it has to be implemented is less than ideal. This should really be much easier in Angular by now. — djskinner, Apr 20 '15 at 16:15

score 8 · Answer 2 · answered May 12 '13 at 23:05

Per the documentation:

enter - when a new item is added to the list or when an item is revealed after a filter
leave - when an item is removed from the list or when an item is filtered out
move - when an adjacent item is filtered out causing a reorder or when the item contents are reordered

So filtering the items in and out will only trigger the enter and leave animations, not the move animation.

To trigger the move animation, you need to cause a reorder of the items, as in this jsfiddle example:

$scope.shuffle = function() {
    $scope.friends = _($scope.friends).shuffle();
}

You may also wanna check out a more in-depth explanation on ngAnimate:

http://gsklee.im/post/50254705713/nganimate-your-angularjs-apps-with-css3-and-jquery

Angularjs ng-animate move example?

2 Answers2