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>
基本的に私が正しく理解すれば、左に行く箱が右から来るだけです。 – Stephen
正しい。左に出て右から入ってくる箱、もう一度左に出る箱など。 – Jimmy
あなたはcss3アニメーションのキーフレームでこれを行うことができます。私は例を提供したいですか? – Stephen