react中控制div的位置移动动画

js文件

import React, { Component} from 'react';

import './compile.less';

class Compile extends Component {

constructor(props) {

　　super(props)

　　this.state = {

　　　　show: true

　　}

}

zoom=()=>{

　　this.setState({

　　　　show: this.state.show ? false : true

　　})

}

render() {

　　return (

　　　　<div className={this.state.show ? 'show compile' : 'hide compile'}>

　　　　　　<div className="compile-title">历史记录</div>

　　　　　　<div className="compile-details"></div>

　　　　　　<div className="compile-copy"></div>

　　　　　　<div className="cut" onClick={this.zoom}></div>

　　　　</div>

　　)

}

}

export default Compile

less文件

.compile{

　　position: relative;

　　top: -227px;

　　left: 80%;

　　z-index:2;

　　width:320px;

　　height:100%;

　　background:#e7e7e7;

　　.compile-title{

　　　　width:320px;

　　　　height:50px;

　　　　font-size: 16px;

　　　　color: #333333;

　　　　line-height:50px;

　　　　padding-left:12px;

　　　　background:#f0f0f0;

　　　　border-bottom:1px solid #aaaaaa;

　　}

　　.compile-details{

　　　　width:320px;

　　　　height:382px;

　　　　background:#e7e7e7;

　　　　border-bottom:1px solid #cccccc;

　　}

　　.compile-copy{

　　　　width:320px;

　　　　height:249px;

　　　　background:#e7e7e7;

　　}

　　.cut{

　　　　position: absolute;

　　　　top: 50%;

　　　　left: -11px;

　　}

}

.show {

　　animation: show-item .8s ease-in forwards;

}

.hide {

　　animation: hide-item .8s ease-in forwards;

}

@keyframes show-item {

　　0% {

　　　　left: 100%;

　　}

　　100% {

　　　　left: 80%;

　　}

}

@keyframes hide-item {

　　0% {

　　　　left: 80%;

　　}

　　100% {

　　　　left: 100%;

　　}

}