First element in array of motion elements with wrong position

@chenglou Thanks for making this very awesome library. I have an issue where when I draw a series of rects on a svg, the first rect is animating from the wrong position. It only happens with the first element and only when I adjust the height. I don't understand why this is occurring so any feedback or guidance would be appreciated. Thanks!

Relevant code for the rect class:

```'use strict';

import React from 'react';
import {Motion, spring} from 'react-motion';

class Bar extends React.Component {
static propTypes = {
yScale: React.PropTypes.func.isRequired,
xScale: React.PropTypes.func.isRequired,
y: React.PropTypes.number.isRequired,
y0: React.PropTypes.number,
barWidth: React.PropTypes.number.isRequired,
padding: React.PropTypes.object
};
constructor(props) {
super(props);
this.state = {
height: 0,
y: props.height - props.padding.top - props.padding.bottom
}
}

componentWillReceiveProps(nextProps) {
this.setState({height: 0, y: nextProps.height - nextProps.padding.top - nextProps.padding.bottom});
}

render() {
let props = this.props;
let y = props.height - props.yScale(props.y0) - props.padding.top - props.padding.bottom - props.yScale(props.y);
let height = props.yScale(props.y);
let x = props.xScale(props.x);

return (

{interpolatingStyle => }

);
}
}

export default Bar;

```


Start with the supplied Bar component and reproduce the SVG rect animation while changing height, focusing on the first array element. Done means the first rect animates from the correct position under the same conditions; the issue names no repository file or test to run.

Written by the indexing model from the issue text.