转换来自不同位置的元素

Question

我想要一个元素，并且在二元事件上，将元素移出页面我将其移动到左侧。我可以轻松完成这一任务。但是，当二进制事件再次发生时，我想获取此元素并将其返回到其原始位置，但这次它从页面的右侧进入。基本上创建元素的旋转/循环外观。如果我的元素只能在两个给定位置之间转换，我怎么能完成这个？感谢。

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      onClick: true,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      onClick: !this.state.onClick
    });
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me</button>
        <div id={this.state.onClick ? "box1A" : "box1B"}></div>
        <div id={this.state.onClick ? "box2A" : "box2B"}></div>
      </div>
    );
  }
}

ReactDOM.render(<App />, app);

#box1A {
  background-color: red;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 100px;
  transition: left linear 1.0s;
}

#box1B {
  background-color: red;
  width: 50px;
  height: 50px;
  position: absolute;
  left: -200px;
  transition: left linear 1.0s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app"></div>

Answer 1

似乎你非常接近添加第二个框。

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      onClick: true,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      onClick: !this.state.onClick
    });
  }
  
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me</button>
        <div id={this.state.onClick ? "box1A" : "box1B"}></div>
        <div id={this.state.onClick ? "box2A" : "box2B"}></div>
      </div>
    );
  }
}

ReactDOM.render(<App />, app);

#box1A {
  background-color: red;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 100px;
  transition: left linear 1.0s;
}

#box1B {
  background-color: red;
  width: 50px;
  height: 50px;
  position: absolute;
  left: -200px;
  transition: left linear 1.0s;
}

#box2A {
  background-color: red;
  width: 50px;
  height: 50px;
  position: absolute;
  right: -200px;
  transition: right linear 1.0s;
}

#box2B {
  background-color: red;
  width: 50px;
  height: 50px;
  position: absolute;
  right: 100px;
  transition: right linear 1.0s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app"></div>