FLIP-style animations

Discussed briefly in https://github.com/drcmda/react-spring/issues/5#issuecomment-378661614, but it would be nice if react-spring could calculate the to/from states if not explicitly provided, similar to react-flip-move which uses the FLIP technique (ultimately getBoundingClientRect)

For example, in react-move you can do this (just by changing the class/styles on the items, they "react")

<FlipMove className="items"
  duration={350}
  staggerDurationBy={20}
  staggerDelayBy={20}
>
  {items.map(item => (
    <div
      className={item.key === selected ? "item selected" : "item"}
      onClick={() => this.selectItem(item.key)}
      key={item.key}>{item.key}</div>
  ))}
</FlipMove>

• https://codepen.io/techniq/pen/qNrYYb
• https://codepen.io/techniq/pen/WxaxaR

Here is the discussion I had with the author of react-flip-move while creating this - https://github.com/joshwcomeau/react-flip-move/issues/69

A similar thing could probably be done like react-morph which is useful to morph shared elements between route states (like Android does a good bit with it's material design

Maybe if you do not provide a from/to to <Transition> it calculates the top/left/width/height automatically (or just diffs the styles and lets the spring transitions them). With flip you apply them, capture the styles, then invert them.

Anyways, I don't have any specific need right now, but thought it was worth having a conversation. Thanks again for the awesome library.

Start by reviewing the API and the FLIP references linked in the issue, especially react-flip-move and react-morph. Determine how automatic to/from states or style differences should be captured and transitioned, then define behavior for elements changing between states before implementation.