react-motion-reactjs-translation.js

import React, { Component } from 'react';
import { Motion, spring } from 'react-motion';

const styles = {
  container: {
    borderRadius: '4px',
    backgroundColor: 'rgb(240, 240, 232)',
    position: 'relative',
    margin: '5px 3px 10px',
    width: '450px',
    height: '50px'
  },
  movingCube: {
    position: 'absolute',
    width: '50px',
    height: '50px',
    borderRadius: '4px',
    backgroundColor: 'rgb(130, 181, 198)'
  }
};

class Example extends Component {

  state = {
    open: false
  };

  render() {
    return (
      <div>
        <button onClick={this.handlesOnClick}>
          Toggle
        </button>
        <Motion style={{x: spring(this.state.open ? 400 : 0)}}>
          {({x}) =>
            <div style={styles.container}>
              <div
                style={
                  {
                    ...styles.movingCube,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`
                  }
                }
              />
            </div>
          }
        </Motion>

      </div>
    );
  }

  handlesOnClick = (e) => {
    e.preventDefault();
    this.setState({open: !this.state.open});
  }
}