Transitioning elements from different positions

Question

I want to take an element, and on a binary event, move the element off the page my moving it to the left. I can accomplish this easily. However, when the binary event occurs again, I want to take this element and return it to its original position, but this time have it come in from the right side of the page. Essentially creating a rotating / cycling appearance of an element. How am I able to accomplish this if my element can only transition between two given positions? Thanks.

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

Seems like you were pretty close with adding the second box.

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>