react-动画

用哪一个安装哪一个 npm i rc-queue-anim,然后引用，一定要写key！！！
http://motion.ant.design/components/queue-anim-cn#components-queue-anim-demo-simple

//定义react组件
import React,{Component} from 'react';
import ReactDom from 'react-dom'
import './components/assets/a.css'
import QueueAnim from 'rc-queue-anim'

class App2 extends React.Component{
    state={
        bl:false,
        l:100
    }
    render() {
        return (<div>
            <h3>动画</h3>
            <input type="button" value="按钮" onClick={()=>{
                this.setState({
                    bl:!this.state.bl,
                    l:Math.random()*300
                })
            }}>
            </input>
            {this.state.bl&&<div className="box" style={{left:this.state.l}}>
                box
            </div>}
        </div>)
    }
}
class App extends Component{
    state={
        bl:false,
        l:100
    }
    render (){  
        return(<div className="">
            <h3>动画 css transition</h3>
            <input type="button" value="按钮" onClick={()=>{
                this.setState({
                    bl:!this.state.bl
                })
            }}/>
            <QueueAnim type={['left','right']} leaveReverse>
                {this.state.bl&&<div className="box" style={{left:this.state.l}} key="1">
                    box
                </div>}
                {this.state.bl&&<div className="box2" style={{left:this.state.l}} key="2">
                    box
                </div>}
            </QueueAnim>
        </div>)
    }
}

// 渲染dom
ReactDom.render(
    <App />
    ,
    document.querySelector('#root')
);

在css内

.box{
     100px;
    height:100px;
    position: absolute;left:100px;top:100px;
    background: red;
    /* transition: 0.5s ease all; */
}

.box2{
 100px;
height:100px;
position: absolute;left:100px;top:250px;
background: blue;
/*transition: 0.5s ease all;*/
}