如何制作一个合理的收缩滑出效果？

Question

现在想要实现的效果是：在点击 left 后， left 向右充满整个屏幕， right 向右滑出屏幕。为了实现这个效果，我做了以下尝试：
思路一：变化后 left 的宽度变成 100%，同时 right 的宽度变成 0；
缺点： right 宽度变成 0，其内容仍然存在。并且如果 right 中有浮动元素，在向右滑动的过程中，页面的布局也会发生变化。
思路二：变化后 left 的宽度变成 100%，同时 right （通过 position 或者 translateX 属性）向右平移；
缺点： right 向右平移后，需要给 container 添加 overflow-x: hidden 属性隐藏，由于 left 和 right 高度不同，最终造成 right 区域垂直方向部分被遮盖。
思路三：变化后 left 的宽度变成 100%，同时 right 通过 scaleX 属性做水平缩放；
缺点： 缩放的过程，left 和 right 区域缩放的速度不同造成视觉上看起来并不顺滑；
思路四：left 和 right 都通过 scaleX 属性进行水平缩放；
缺点：虽然解决了视觉上不顺滑的问题，但是 scaleX 造成 left 文字变宽。

这里是代码部分：
https://jsfiddle.net/bLyLfahf/1/

Answer 1

我后来想到了思路五，动画效果通过 margin 实现，左侧定义一个左浮动，右侧根据左侧的宽度定义一个 margin-left 值，然后通过改变 margin-left 值来实现右侧的横向移动。
缺点是：右侧内部的清除浮动也会影响到左侧内容。

Answer 2

还有一个思路，也是比较正常的思路：
点击left之后，都用绝对布局，left上升到最上层，right在left之下，right保持不变，left宽度变成100%，然后再隐藏right。

Answer 3

可以改变一下left和right的布局方式吧
采用absolute的两列布局方式，另外采用translateX应该是比较好的办法了
做了个demo，看看是不是你想要的效果？

http://runjs.cn/detail/ysby5fem