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