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>
<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 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())
    }
  }
  render() {
    return (
      <div className="deck" style={this.props.style}>
        {this.state.cards.map((cardModel, i) => {
          let position = {
            x: i * this.props.shift.left
            , y: i * this.props.shift.top
          };
          let onClick = (
            this.props.topOnly && i !== this.state.cards.length - 1 
            ? () => {}
            : () => this.props.onCardClick(this.props.name, cardModel, position));
          return <Card 
            cardModel={cardModel} 
            position={position}
            onClick={onClick}
            index={i}
            key={i} 
            />
        })}
      </div>
    );
  }
}

class Board extends React.Component {
  constructor(props){
    super(props);
  }
  transferCard(receiverName) {
    return (senderName, card, position) => {
      let sender = this.refs[senderName];
      let receiver = this.refs[receiverName];
      
      // Send
      let cards = sender.state.cards;
      cards.splice(cards.indexOf(card), 1);
      sender.setState({cards});
      
      // Receive
      cards = receiver.state.cards;
      cards.push(card);
      receiver.setState({cards});
    }
  }
  render() {
    return (<div>
        <CardCollection 
   ...