異なる位置から要素を移動する

Question

要素を取得し、バイナリイベントで要素をページから移動して、左に移動します。私はこれを簡単に達成することができます。しかし、バイナリイベントが再び発生した場合、この要素を元の位置に戻したいが、今回はページの右側から入力する必要がある。基本的に要素の回転/サイクリングの外観を作成します。私の要素が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> 
 
     <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

あなたが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> 
 
     <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>