title: What's a react.js-friendly way to animate a list-reordering?
body: <p>I have a list of items with scores, ordered by scores, rendered by react.js as a vertically-oriented list of rectangular items (highest scores at top). Hovers and other clicks on the individual items may show/hide extra info, changing their vertical height.</p>
  
  <p>New information arrives that changes the scores, slightly, making some items rank higher and others lower after a re-sort. I'd like the items to simultaneously <em>animate</em> to their new positions, rather than appear in their new locations instantly. </p>
  
  <p>Is there a recommended way to do this in React.js, perhaps with a popular add-on?</p>
  
  <p>(In a similar past situation using D3, a technique I've used was roughly:</p>
  
  <ol>
  <li>Display the list with item DOM nodes in their natural order, with relative positioning. With relative positioning, other small changes – CSS or JS-triggered – to individual items' extent shift others as expected.</li>
  <li>Mutate all the DOM nodes, in a single step, to have their actual relative-coordinates as new absolute coordinates – a DOM change that causes no visual change.</li>
  <li>Re-order the item DOM nodes, within their parent, to the new sort order – another DOM change that causes no visual change.</li>
  <li>Animate all nodes' top-offsets to their new calculated values, based on the heights of all preceding items in the new ordering. This is the only visually-active step.</li>
  <li>Mutate all item DOM nodes back to non-offset relative-positioning. Again, this causes no visual change, but the now-relatively-positioned DOM nodes, in the natural ordering of the underlying list, will handle internal hover/expand/etc style changes with proper shifting.</li>
  </ol>
  
  <p>Now I'm hoping for a similar effect in a React-ish way...)</p>