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={}></div>
    </div>
  )
}
}
export default Compile
less⽂件
pile{
  position: relative;
  top: -227px;
  left: 80%;
  z-index:2;
  width:320px;
  height:100%;
  background:#e7e7e7;
  pile-title{
    width:320px;
    height:50px;
    font-size: 16px;
    color: #333333;
    line-height:50px;
    padding-left:12px;
    background:#f0f0f0;
    border-bottom:1px solid #aaaaaa;
  }耐克react和zoom
  pile-details{
    width:320px;
    height:382px;
    background:#e7e7e7;
    border-bottom:1px solid #cccccc;
  }
  pile-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%;
  }
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。