reactjs - 如何使用 react-motion 进行动画左右运动

Question

单击按钮后，我想让 div 左右移动 3 次。我可以使用下面的代码来完成它。jsfiddle在这里

var Thing = React.createClass({
  getInitialState: function () {
    return {
      left: 0
    }
  },
  sideToSide: function(count = 1) {
    if (count <= 6) {
      this.setState({ left: this.state.left === 0 ? 45 : 0 })    
      setTimeout(() => {
        this.sideToSide(count + 1)
      }, 200)      
    }     
  },

  render: function() {
    return (
      <div>
        <Motion style={{ left: spring(this.state.left) }}>
          {(a) => (
            <div style={{ marginLeft: a.left }}>
              Moroni 10:3-5
            </div>
          )}
        </Motion>
        <button onClick={() => this.sideToSide()}>side to side</button>
      </div>
    );
  }
});

但我想知道除了更改状态并将更改传递给<Motion/>. 有没有像传递这样（或类似的）按顺序动画的样式数组的选项？

<Motion styles={[
  { marginLeft: '45px' },
  { marginLeft: '0px' },
  { marginLeft: '45px' },
  { marginLeft: '0px' },
  { marginLeft: '45px' },
  { marginLeft: '0px' }
]}>
 {...}
</Motion>