react- motion

o1transition-react-motion.jsx

import React from 'react'
import {Motion, spring} from 'react-motion'
import  './css/demo1.css'
export default class Demo1 extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            open: false
        }
    }

    handMouseDown(e) {
        e.preventDefault();
        var me = this;
        this.setState({
            open: !me.state.open
        })
    }

    render() {
        return <div>
            <button onMouseDown={this.handMouseDown.bind(this)}>
                anniu
            </button>
            <Motion style={{x: spring(this.state.open ? 400 : 0)}}>
                {({x}) => {
                    return <div className="demo1">
                        <div className="demo1-block" style={{
                            transform: `translate3d(${x}px,0,0)`,
                        }}></div>
                    </div>
                }}
            </Motion>

        </div>
    }
}