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

Posted 2023-01-03 dongyuezhuang

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