現(xiàn)在想要實現(xiàn)的效果是：在點擊 left 后， left 向右充滿整個屏幕， right 向右滑出屏幕。為了實現(xiàn)這個效果，我做了以下嘗試：思路一：變化后 left 的寬度變成 100%，同時 right 的寬度變成 0；缺點： right 寬度變成 0，其內(nèi)容仍然存在。并且如果 right 中有浮動元素，在向右滑動的過程中，頁面的布局也會發(fā)生變化。思路二：變化后 left 的寬度變成 100%，同時 right （通過 position 或者 translateX 屬性）向右平移；缺點： right 向右平移后，需要給 container 添加 overflow-x: hidden 屬性隱藏，由于 left 和 right 高度不同，最終造成 right 區(qū)域垂直方向部分被遮蓋。思路三：變化后 left 的寬度變成 100%，同時 right 通過 scaleX 屬性做水平縮放；缺點： 縮放的過程，left 和 right 區(qū)域縮放的速度不同造成視覺上看起來并不順滑；思路四：left 和 right 都通過 scaleX 屬性進(jìn)行水平縮放；缺點：雖然解決了視覺上不順滑的問題，但是 scaleX 造成 left 文字變寬。這里是代碼部分：https://jsfiddle.net/bLyLfahf/1/