Add AnimatedAgent and Animated

[mzgoddard]

Animated wraps React elements and provides a hook to overwrite a simple transition animation for whenever a React element is updated or rerendered.

<AnimatedAgent>
  <ol>
    {list.map(item => <Animated key={item.key} animateKey={item.key}><li>{item.name}</li></Animated>)}
  </ol>
</AnimatedAgent>

Animated and Agent rely on animateKey to determine where an Animated element was last on the screen and animate from that position. As such animateKey is required and unlike key should be unique in all Animated elements under an Agent. In the given above example if an the list was sorted or an item added or removed. The items in the list would animate from their previous position to the new position. Animated doesn't directly support animating removed items, for that you'd need to combine Animated with ReactTransitionGroup to persist the removed item until its removal animation completes.

Animated takes an animate property to define custom animations.

<Animated animateKey={uniqueKey} animate={options => {
  const {rect, lastRect} = options;
  if (this.justAddedItem(item)) {
    lastRect.height = 0;
  }
  if (this.justRemovedItem(item)) {
    rect.height = 0;
  }
  return options.animateFrom(lastRect, rect, 0.3);
}}><li>{item.name}</li></Animated>

Since the animateKey is unique on the page, an Animated can be removed from one part of the DOM's hierarchy and added to another. A simple example is moving an animated from one list to another.

<AnimatedAgent>
  <ol>
    {list1.map(item => <Animated key={item.key} animateKey={item.key}><li>{item.name}</li></Animated>)}
  </ol>
  <ol>
    {list2.map(item => <Animated key={item.key} animateKey={item.key}><li>{item.name}</li></Animated>)}
  </ol>
</AnimatedAgent>

[MattSurabian]

Couple of questions but otherwise :+1:

[MattSurabian]

:+1: