on item leave it's jumping to the end of the list and not holding position about velocity-react

[fionawhim]

For debugging animation issues, I recommend turning down the animation time to something on the order of 60s. That should give you enough time to investigate what's going on in a web inspector. The React TransitionGroup code should be keeping DOM elements in the correct order, providing your key attributes aren’t changing, so I would suspect there’s either something with keys or with your animation.

[antsav]

same problem is visible here : http://codepen.io/agrewell/pen/ZYdGOJ

and you may see how in example on click in the middle on any row you see disappearing last row "Out" sliding right right under the row stack

exactly the same behaviour I'm experiencing with twitter-fabric/velocity-react TrnasitionGroup.
I've tried with duration=30000 and saw the same:

1. click on the row
2. stack shrinks on one row
3. in the bottom appears row with the content of last row
4. animation takes place

[antsav]

resolved )

found out that I was having key as index of iteration and reinjected element had conflicted key

Like below:

let index = 0;
[...].map((item)=>{
  index ++;
  <div key={index}>
})

changed to unique key and everything works perfect!

Thnak you ! 😄

[fionawhim]

Glad to hear!