javascript - 不同位置的过渡元素

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>