从不同位置转换元素
从不同位置转换元素
提问于 2017-11-03 06:05:04
我想要获取一个元素，在发生二进制事件时，将元素移出页面，也就是将其移动到左侧。我可以很容易地做到这一点。但是，当二进制事件再次发生时，我想将此元素返回到其原始位置，但这一次它是从页面的右侧进入的。实质上是创建元素的旋转/循环外观。如果我的元素只能在两个给定的位置之间转换，我怎么能做到这一点呢？谢谢。
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>
回答 1
Stack Overflow用户
发布于 2017-11-03 06:14:53
看起来你已经很接近添加第二个盒子了。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47085352
复制相关文章
相似问题
腾讯云开发者
