頁面的橫向布局我們已經實現(xiàn)好了，那么如何實現(xiàn)頁面與頁面之間的切換呢？
一般來說要根據(jù)布局的結構來，大體有2種：
顯而易見，移動父容器簡單很多，只需要改變父容器X軸的坐標就可以了。如果父容器中子元素有很多的話，那么我們會考慮第二種算法，可以做成動態(tài)加載，但是這種處理是超級麻煩，這里不討論
改變坐標的處理可以分為2種：
傳統(tǒng)的就是修改元素style是坐標屬性，這個沒什么好說的，使用簡單，一般都需要配合定時器使用。
CSS3引入了一個新的屬性Transform
transform 屬性向元素應用 2D 或 3D 轉換，該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。其中會有一個值translate3d(x,y,z) 是用來控制元素的位置在頁面上的三軸的位置的，translate3d這里指明了3d就是啟用了3d加速，也就是啟動GPU來處理，性能更強
過去，為了實現(xiàn)這種平滑的過渡效果，我們需要借助于Flash技術，現(xiàn)在只需要簡單的使用CSS3 Transition的方法就可以實現(xiàn)，這是一個簡單的動畫屬性
transition可以設置一些具體的參數(shù)，比如動畫執(zhí)行的時間，變化的算法、動畫延時等等，具體大家可以搜索更細致的資料
這里需要特別注意的就是：
transform屬性是靜態(tài)屬性，不是動畫屬性，一旦寫到style里面，將會直接顯示作用，無任何變化過程
簡單的一句話描述就是
通過設置transition的一些參數(shù)，讓translate3d這個屬性發(fā)生變化
如何通過translate結合transition改變元素的頁面位置，我們具體看到右邊的代碼
通過點擊"點擊頁面開始切換"出現(xiàn)頁面切換的效果
打開index.html文件，在代碼的102行填入相應代碼，這樣能讓頁面開始滾動
element.css({
'transition-timing-function': 'linear',
'transition-duration': '5000ms',
'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)' //設置頁面X軸移動
});
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報