Angular ng-repeat animation on delete


I am trying to create an add\remove animation in an ng-repeat (with css transitions). For some reason the fade out effect always happens at the bottom of the list and not on the item you choose to delete (for example try deleting the first item , the effect shows at the bottom) . Here's a plunkr

Any thoughts ?

Problem courtesy of: Joel_Blum


If you remove

track by $index

, then it should be all right. just:

<div ng-repeat="item in items" class="repeat-item">
Solution courtesy of: Jacek Kolasa


Use a simple ng-repeat: "item in items" in this way works fine.

Check this plunker

Discussion courtesy of: Atropo

This recipe can be found in it's original form on Stack Over Flow.