Javascript 从不同位置转换元素

我想获取一个元素，在一个二进制事件中，将该元素从页面中移出，并将其向左移动。我很容易做到这一点。但是，当二进制事件再次发生时，我希望获取这个元素并将其返回到其原始位置，但这次它是从页面的右侧传入的。基本上创建元素的旋转/循环外观。如果我的元素只能在两个给定的位置之间转换，我如何才能实现这一点？谢谢

类应用程序扩展了React.Component{ 建造师{ 超级的 此.state={ 是的， }; this.handleClick=this.handleClick.bindthis； } 手舔{ 这是我的国家{ onClick:！this.state.onClick }; } 渲染{ 回来 点击我 ; } } ReactDOM.render，应用程序； 框1A{ 背景色：红色； 宽度：50px； 高度：50px； 位置：绝对位置； 左：100px； 过渡：左线性1.0s； } 框1B{ 背景色：红色； 宽度：50px； 高度：50px； 位置：绝对位置； 左：-200px； 过渡：左线性1.0s； }

---

看起来你很快就要添加第二个框了

类应用程序扩展了React.Component{ 建造师{ 超级的 此.state={ 是的， }; this.handleClick=this.handleClick.bindthis； } 手舔{ 这是我的国家{ onClick:！this.state.onClick }; } 渲染{ 回来 点击我 ; } } ReactDOM.render，应用程序； 框1A{ 背景色：红色； 宽度：50px； 高度：50px； 位置：绝对位置； 左：100px； 过渡：左线性1.0s； } 框1B{ 背景色：红色； 宽度：50px； 高度：50px； 位置：绝对位置； 左：-200px； 过渡：左线性1.0s； } 框2a{ 背景色：红色； 宽度：50px； 高度：50px； 位置：绝对位置； 右：-200px； 过渡：右线性1.0s； } 框2B{ 背景色：红色； 宽度：50px； 高度：50px； 位置：绝对位置； 右：100px； 过渡：右线性1.0s； }

---

谢谢，我想我没有很好地澄清我的问题，你可以找到我的新问题。