Deck/Hand Card System

Need help @http://stackoverflow.com/questions/38526702/animate-movement-of-react-component-from-one-to-another/38528864#38528864

by fen1kz

HTML

<script src="https://fb.me/react-with-addons-15.2.1.js"></script>
<script src="https://fb.me/react-dom-15.2.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
<div id='app'></div>

SCSS

body {
  font-family: Tahoma, sans-serif;
}

.deck {
  position: absolute;
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  border: 1px solid #222;
  background: #779;
  width: 75px;
  height: 120px;
  border-radius: 10px;
  &:hover {
    cursor: pointer;
    background: #799;
  }
  .inner {
    font-weight: bold;
    text-align: center;
  }
}

Babel + JSX

class Animation extends React.Component {
  constructor(props) {
    super(props)
  }
  xy2lt (p) {
    return {left: p.x, top: p.y}
  }
  componentDidMount() {
    const state = this.props.state
    const node = ReactDOM.findDOMNode(this.refs.subject);
    Velocity(node, this.xy2lt(state.start), {duration: 0});
    Velocity(node, this.xy2lt(state.end), {duration: 1000})
      .then(() => state.onFinish());
  }
  render () {
    const state = this.props.state;
    return <div>animation of 
      {
        React.cloneElement(state.subject, {ref: 'subject'})
      }</div>;
  }
}

class CardModel {
  constructor() {
    this.name = Math.random()
      .toString(36)
      .replace(/[^a-z]+/g, '')
      .substr(0, 4)
      .toUpperCase()
  }
}

class Card extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div 
      onClick={this.props.onClick}
      className='card' style={{
        left: this.props.position.x
        , top: this.props.position.y
      }}>
      <div className='inner'>
        {this.props.index}
        <br/>{this.props.cardModel.name}
      </div>
    </div>
  }
}

class CardCollection extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cards: Array(this.props.count).fill()
        .map((x, i) => new CardModel())
    }
  }
  getCardPosition(i) {
    return {
      x: i * this.props.shift.left
      , y: i * this.props.shift.top
    }
  }
  render() {
    return (
      <div className="deck" style={this.props.style}>
        {this.state.cards.map((cardModel, i) => {
          let position = this.getCardPosition(i);
          let onClick = (
            this.props.topOnly && i !== this.state.cards.length - 1 
            ? () => {}
            : () => this.props.onCardClick(this.props.name
                                           , cardModel
                                           , position));
          return <Card 
            cardModel={cardModel} 
          ...