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%; } }