What's a react.js-friendly way to animate a list-reordering?
I just released a module to tackle exactly this problem
https://github.com/joshwcomeau/react-flip-move
It does a few things differently than Magic Move / Shuffle:
- It uses the FLIP technique for hardware-accelerated 60FPS+ animations
- It offers options to "humanize" the shuffle by incrementally offsetting delay or duration
- It handles interruptions gracefully, no weird glitch effects
- Bunch of other neat stuff like start/finish callbacks
Check out the demos:
http://joshwcomeau.github.io/react-flip-move/examples/#/shuffle
I realise this is a bit of an old question and you've probably found a solution by now, but for anyone else coming across this question, check out the MagicMove library by Ryan Florence. It's a React library to handle the exact scenario you describe: https://github.com/ryanflorence/react-magic-move
See it in action: https://www.youtube.com/watch?v=z5e7kWSHWTg#t=424
Edit: This is broken in React 0.14. See React Shuffle as an alternative, as suggested by Tim Arney below.
React Shuffle is solid and up to date. It's inspired by Ryan Florences Magic Move demo
https://github.com/FormidableLabs/react-shuffle