Animating the Unanimatable

atu_4.jsx

componentDidUpdate(previousProps) {
  previousProps.children.forEach( child => {
    let domNode = ReactDOM.findDOMNode( this.refs[child.key] );

    const newBox = domNode.getBoundingClientRect();
    const oldBox = this.state[key];
    
    const deltaX = oldBox.left - newBox.left; 
    const deltaY = oldBox.top  - newBox.top;

    requestAnimationFrame( () => {
      // Before the DOM paints, Invert it to its old position
      domNode.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
      // Ensure it inverts it immediately
      domNode.style.transition = 'transform 0s';  
    });
  });
}