2017-11-03 13 views
0

要素を取得し、バイナリイベントで要素をページから移動して、左側に移動します。私はこれを簡単に達成することができます。しかし、バイナリイベントが再び発生した場合、この要素を元の位置に戻したいが、今回はページの右側から入力する必要がある。異なる位置から要素を移動する

次のスニペットを参照してください。本質的に、オンからオフに本質的に移行するとき、私はボックス1をレンダリングしたい。オフからオンに進むとき、ボックス2をレンダリングする。私の要素が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>

+0

基本的に私が正しく理解すれば、左に行く箱が右から来るだけです。 – Stephen

+0

正しい。左に出て右から入ってくる箱、もう一度左に出る箱など。 – Jimmy

+0

あなたはcss3アニメーションのキーフレームでこれを行うことができます。私は例を提供したいですか? – Stephen

答えて

1

あなたはreact-transition-groupを使用しようとする必要があり、それはあなたがそれをclassNameを与えることができ、それがenterenter-activeleaveleave-active、などの適切なアニメーションフックを追加します。

そのページの例を参照してください。

関連する問題