从不同位置过渡元素答案

【问题标题】：Transitioning element from different positions从不同位置过渡元素
【发布时间】：2018-04-16 12:58:31
【问题描述】：

我想获取一个元素，在二进制事件中，将元素移出页面，将其移到左侧。我可以很容易地做到这一点。但是，当二进制事件再次发生时，我想把这个元素恢复到原来的位置，但是这次让它从页面的右侧进来。

请参阅下面的 sn-p。本质上，当从 ON 到 OFF 时，我想渲染框 1。从 OFF 到 ON 时，我想渲染框 2。如果我的元素只能在两个给定位置之间转换，我怎么能做到这一点？谢谢。

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

#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;
}

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

【问题讨论】：

所以基本上，如果我理解正确的话，您只想要一个向左并从右侧来的盒子？
正确。一个向左离开并从右侧进入的盒子，然后又向左离开，以此类推。
你可以用css3动画关键帧来做到这一点，你要我举个例子吗？
谢谢@Stephen，但我想我会选择 react-transition-group。

标签： javascript html css reactjs ecmascript-6

【解决方案1】：

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

查看该页面中的示例。

【讨论】：