---

參考
 

在手機網頁換頁使用滑動特效時

例如從右邊滑到中間
如果是用調整css的 left:100% → left:0 的話
在手機上看會頓頓的

如果改用 transform: translate3d(100%, 0, 0);  
      → transform: translate3d(0, 0, 0);

或是 transform: translateX(100%);
   →transform: translateX(0);

會使用手機的硬體加速，讓捲動效果變順

http://jsfiddle.net/Knuckles/RP78F/

但有個問題就是被套用了 transform: translate3d(0, 0, 0) 的div
裡面的 fixed 會失效，像這樣:
http://jsfiddle.net/Knuckles/3nxrw/
.page 裡有兩個div: .navbar 與 .content
.page 設為 transform: translate3d(0, 0, 0);
.navbar 設為 position:fixed; 但捲動頁面時，.navbar還是被捲上去了

若是將 .page 的 translate3d 拿掉
當要左右滑動時再將 translate3d 加上去的話
畫面會閃動一下，因為手機必需要切換不同的方法來顯示畫面
造成滑動效果又變得不好了

比較好的解決方式為

不要直接把 .page 設為 translate3d
而是把 .page 裡再分成固定在上方的 .navbar 和 要捲動的 .content
然後分別把 .navbar 和 .content 設為 translate3d
像這樣:
捲動頁面時，.navbar 就會固定在上面了
注意 .navbar 要再加個 z-index 不然會被 .content 蓋住


套用到左右滑動頁的結果為
http://jsfiddle.net/Knuckles/SWPDL/
注意因為 .page 沒有設定 translate3d 移動位置 (是裡面的div在位移)
所以要加 z-index 不然 .page.right 會蓋住 .page.center


若要將滑動出螢幕外的.page設為display:none;，要滑進來時才顯示的話
http://jsfiddle.net/Knuckles/urU6K/
用 setTimeout 讓 #menu 滑動到左邊後隱藏
        $('#menu').attr('class','page transition left');

setTimeout(function(){
            $('#menu').attr('page left hide');
        }, 1000);

(也可以綁 webkitTransitionEnd事件，只是在 firefox 不支援，
 如果要在電腦上看也正常的話還是用 setTimeout 比較好)

將 #text 移動至右邊後，要用 setTimeout 延遲個 1ms 的時間後再移至中間
不然在 Android 的 Chrome 看會有瞬移的問題
        $('#text').attr('class','page right').show();
        setTimeout(function(){
            $('#text').attr('class','page transition center');
        },1);

--
※ 作者: Knuckles 時間: 2014-01-14 02:04:19
※ 編輯: Knuckles 時間: 2014-01-19 19:58:56