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