Question

我想要一个元素，并且在二元事件上，将元素移出页面我将其移动到左侧。我可以轻松完成这一任务。但是，当二进制事件再次发生时，我想获取此元素并将其返回到其原始位置，但这次它从页面的右侧进入。

请参阅以下代码段。基本上，当Essentially从ON变为OFF时，我想渲染方框1.当从OFF变为ON时，我想渲染方框2.如果我的元素只能在两个给定位置之间转换，我怎么能完成这个？感谢。

＆＃13;

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>
        <h2>{this.state.onClick ? "ON" : "OFF"}</h2>
        <button onClick={this.handleClick}>Click Me</button>
        <div id={this.state.onClick ? "box1A" : "box1B"}>BOX 1</div>
        <div id={this.state.onClick ? "box2A" : "box2B"}>BOX 2</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, app);

＆＃13;

#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;
  top: 200px;
  width: 50px;
  height: 50px;
  position: absolute;
  right: 340px;
  transition: right linear 1.0s;
}

#box2B {
  background-color: red;
  top: 200px;
  width: 50px;
  height: 50px;
  position: absolute;
  right: -200px;
  transition: right linear 1.0s;
}

＆＃13;

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

＆＃13;

Answer 1

你应该尝试使用react-transition-group，它允许你给它一个className，它会附加适当的动画钩子，如enter，enter-active，{{ 1}}和leave。

查看该页面中的示例。

从不同位置过渡元素

1 个答案: