10

I'm a little flummoxed when it comes to animating ng-move in an ng-repeat. If I move an array item from 3 to 7 for instance, items 4-7 get shifted up and they animate. However the actual item I moved from 3 and placed in position 7, does not. Here's a plunkr demonstrating my issue.

http://plnkr.co/edit/4yRkLWbsU57YxrYOrWUQ?p=preview

Moving item 7 to 3, however, works as I expect, animating the single moved item, and not the items that have been pushed down.

This is not very useful for showing a user what moved. How should someone properly animate an ng-move?

Chris
  • 3,925
  • 2
  • 18
  • 15

2 Answers2

1

@tasseKat has an excellent answer, which explains the behavior you observed: https://stackoverflow.com/a/27616435/1652643

However, his solution is not as simple as you would wish... but so far I haven't found anything better.

Community
  • 1
  • 1
antoine
  • 2,036
  • 25
  • 17
0

The correct syntax is 

arrayVar.splice(to, 0, arrayVar.splice(from, 1));

To remove and return an element at the index i of array arr, use arr.splice(i, 1),

zs2020
  • 53,766
  • 29
  • 154
  • 219
  • Thanks for the quick answer. Unfortunately, that appeared to work because it triggered ng-enter and ng-leave. I updated the plunkr to show the animations differently. – Chris Dec 19 '13 at 22:29
  • @Chris I didn't get it. I think my fix still works. You don't need `[0]` – zs2020 Dec 19 '13 at 22:35
  • By returning array.splice(i, 1), you are returning an array, not the element. This triggers the ng-leave/ng-enter, not the ng-move transitions in AngularJS. The plunkr is just the simplest case I could do to illustrate that ng-move (which is actually triggered during a sort in my real code) is not animating the actual moving item. I updated the plunkr to show leave/enter/move as red/green/blue. It's the blue animations that are my problem. I'm sorry for the confusion. – Chris Dec 19 '13 at 23:46