search

joshwcomeau / react-flip-move

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
http://joshwcomeau.github.io/react-flip-move/examples
MIT License
4.08k stars 259 forks source link

Animation not working #188

Closed imerkle closed 7 years ago

imerkle commented 7 years ago

https://www.webpackbin.com/bins/-KtqTYBCgNDqG0bDeDNA

Did a quickstart from Readme. doesnt works atall

Hypnosphi commented 7 years ago

You use index as key, so FlipMove thinks that all the children stay on their position (item with key 0 is still the first, 1 is the second etc.). Try using something other as a key, e.g. name field: https://www.webpackbin.com/bins/-KtsMYuzFa9E_3xIG5LW

See gotchas section: https://github.com/joshwcomeau/react-flip-move#gotchas