Animating ng-repeat ng-move in angular 1.2.x

Question

I'm having difficulty getting a css animation for movement in an angular ng-repeat list. I have a plunker here: http://plnkr.co/edit/KIcTiJ?p=preview

As you can see, the ng-enter animation is processed when the plunker is first loaded. However, I can't find any way to have an animation get triggered for list movement. In the example, by clicking on the arrows, the ng-hide is processed, and I would expect the ng-move animation to be triggered, but I'm wondering if I'm misunderstanding how the ng-repeat move animation is triggered.

In either case, can anyone suggest a better way for me to get angular 1.2 animations applied to this list when I click the left and right arrows in that example? I have tried alternate methods of generating the ng-repeat (I could use an angular filter instead of an ng-hide), and I've tried different css transitions, but I can't seem to get anything to work. Any advice here would be greatly appreciated on how to progress.

Sorry if this question seems like a repeat, but I looked through similar questions on stackoverflow, but the only other answers I could find were for the older angular animation framework, or suggested custom javascript animation, which I was hoping to avoid.

Tasnim Reza · Accepted Answer · 2014-02-02 19:00:57Z

ng-repeat animation work if the collection has changed. You can use $filter to reflect your change in the collection.

<li ng-class="{'text-danger': item == f}" ng-repeat="item in items| filter: filteredData" class="animate-repeat"> <span>{{item}}</span> </li>

Here filteredData is a controller function which execute your filter logic. (you can write custom filter as well)

 $scope.filteredData = function(item) { return (Math.abs($scope.f - item) < 2); }

Check the updated Plunker how animation works.

Ah ok- by using the $filter instead of ng-hide to modify the displayed items, I am now getting the animations to display: plnkr.co/edit/KIcTiJ?p=preview. Thanks!

Collectives™ on Stack Overflow

Animating ng-repeat ng-move in angular 1.2.x

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related