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

const CARD_ANIMATION = 400;

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

class Card extends React.Component {
  constructor(props) {
    super(props);
  }
  
  onCardClick() {
    if (this.props.onCardClick) {
      this.props.onCardClick(this);
    }
  }
  
  componentDidMount() {
    console.log(this.props.cardModel.id, 'componentDidMount')
    const cardDOM = ReactDOM.findDOMNode(this);
    if (this.props.animation) {
      Velocity(cardDOM, {
          left: this.props.animation.x
          , top: this.props.animation.y
      }, {duration: 0});
      Velocity(cardDOM, {
          left: this.props.position.x
          , top: this.props.position.y
      }, {duration: CARD_ANIMATION});
    } else {
      Velocity(cardDOM, {
          left: this.props.position.x
          , top: this.props.position.y
      }, {duration: 0});
    }
  }
  
  componentWillReceiveProps(nextProps) {
    console.log(this.props.cardModel.id, 'componentWillReceiveProps')
    const cardDOM = ReactDOM.findDOMNode(this);
    Velocity(cardDOM, {
        left: nextProps.position.x
        , top: nextProps.position.y
    }, {duration: CARD_ANIMATION});
  }
  
  render() {
    return <div 
      onClick={() => this.onCardClick()}
      className='card'>
      <div className='inner'>
        {this.props.index}
        <br/>{this.props.cardModel.name}
      </div>
    </div>
  }
}

class CardCollection extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.state.cards = Array(this.props.count).fill()
        .map((x, i) => new CardModel());    
    this.onCardClick = this.onCardClick.bind(this);
    this.animations = {};
  }
  onCardClick(...args) {
    return this.props.onCardClick(this.props.name, ...args)
  }
  getCardPosition(i) {
    return {
      x: i * this.props.shift.left
      , y: i *...