基于CSS3的WEBAPP橫向滑動模式演化
前言
隨著移動網絡速率和設備硬件水平的不斷提升，webapp的發展更加的native化，其表現效果和性能也會越來越好，在可預計的未來很有可能替代native或者平起平坐，那么我們研究更好的交互體驗是非常有必要的。
目前我們所常見的webapp越來越多的是以SPA(single page application)的模式進行開發，同時嵌套在android或者ios本地殼里面，也就是hybrid應用，這種開發方式所帶來的優勢就不多討 論，本文研究的重點是在SPA模式中，頁面間橫向滑動切換場景時模式是怎樣設計的。在這篇文章里，筆者將展示并闡述四種橫向滑動模式的架構布局及CSS設 計方案，供大家參考(多圖請耐心加載)。
一、容器整體滑動（DEMO只演示A-B-C-B，下同）
模擬動畫效果見下圖(上)，滑動分解見下圖(下)：
DEMO地址：http://nirvana.sinaapp.com/demo_slider/slider_1.html
布局方式：父容器相對定位并撐滿整個device的viewport，子頁面絕對定位并依次并排排列在viewport中（從左到右）
.view-container { // 父容器布局方式
position: relative;
width: 100%;
height: 100%;
padding-top: 44px;
box-sizing: border-box;
-webkit-transform: translate3d(0,0,0); //激活GPU 3D加速
-webkit-backface-visibility: hidden;
}
.page-container { // 子頁面布局方式
position: absolute;
z-index: 1;
top: 0;
left: 0; // 初始化為0，動態計算第N個page，并賦值(N-1)*100%
width: 100%;
height: 100%;
overflow: hidden;
background-color: #F8F8F8;
}
滑動方式：父容器利用CSS3的動畫transform3D進行X軸的滑動(JS控制直接噴到DOM節點中)
-webkit-transform: translate3d(-100%, 0px, 0px); -webkit-transition: 300ms; transition: 300ms;
二、單個頁面滑動
模擬動畫效果，見下圖：
DEMO地址：http://nirvana.sinaapp.com/demo_slider/slider_2.html
布局方式：父容器高度100%，子容器正常文檔流布局（X軸隱藏，Y軸默認原生滾動）
.view-container {
height: 100%;
}
.page-container {
position: relative;
width: 100%;
min-height: 100%;
overflow-x: hidden;
background-color: #F8F8F8;
}
滑動方式：利用class添加動畫樣式（keyframes animation），左右進出各一種
@-webkit-keyframes sliderightout{from{-webkit-transform:translateX(0px);opacity:1}to{-webkit-transform:translateX(50%);opacity:0}}
@-webkit-keyframes slideleftin{from{-webkit-transform:translateX(-50%);opacity:0}to{-webkit-transform:translateX(0px);opacity:1}}
@-webkit-keyframes slideleftout{from{-webkit-transform:translateX(0px);opacity:1}to{-webkit-transform:translateX(-50%);opacity:0}}
@-webkit-keyframes sliderightin{from{-webkit-transform:translateX(50%);opacity:0}to{-webkit-transform:translateX(0px);opacity:1}}
.slideleftout{-webkit-animation:slideleftout 350ms ease-in-out;}
.slideleftin{-webkit-animation:slideleftin 350ms ease-in-out;}
.sliderightout{-webkit-animation:sliderightout 350ms ease-in-out;}
.sliderightin{-webkit-animation:sliderightin 350ms ease-in-out;}
.animatestart{position:absolute;top:0;left:0;z-index:3;width:100%;height:100%;overflow-x:hidden}
.animatestart.page-container{overflow-x:hidden;-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;background-color:#f5f5f5}</pre>
三、雙頁聯動滑動
模擬動畫效果，見下圖：
DEMO地址：http://nirvana.sinaapp.com/demo_slider/slider_3.html
布局方式：類似于第一種，父容器和子容器都絕對定位于viewport中，不同點是父類的上級布局更加細分，且大膽使用了webkit-box彈性盒子；子容器沒有并排顯示，而是重疊隱藏
.view-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.page-container {
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #F8F8F8;
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility:hidden;
}
滑動方式：滑動開始時先將隱藏的下一個子頁面拉到viewport右側與當前子頁面平行，然后緊接著兩個子頁面同步滑動，最后回歸樣式，中間的時間差事件均有JS控制（詳見demo邏輯）
四、三舞臺雙頁視差滑動
模擬動畫效果見下圖（上），分解邏輯圖見下圖（下）：
DEMO地址：http://nirvana.sinaapp.com/demo_slider/slider_4.html
布局方式：這里我設定了三舞臺(stage)的概念，其實就是當前viewport的左右側各虛擬一個同樣大小的viewport，當然，正常情況下我們只能看到當前舞臺的子頁面，leftstage是-100%的位置，rightstage是100%的位置，我們分別用三個class來定義：pageOld、pageInit、pageNew來代替
.pageInt {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.pageOld {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.pageNew {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
滑動方式：
1，定義正向（向左滑）和反向（向右滑）兩個概念,；
2，定義快速和慢速兩個概念；
則就是四種動態兩種組合：正向快速+正向慢速、反向快速+反向慢速；
.slideSlow {
-webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
-ms-transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
}
.slideFast {
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0);
-ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0);
}
.slideSlowBack {
-webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0);
-ms-transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0);
}
.slideFastBack {
-webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
-ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;
}
其中在三舞臺視差滑動中的滑動曲線是經過數次的真機實驗后找到的參數（cubic-bezier(0.42, 0, 0.58, 1.0)），這條曲線的滑動形態最接近IOS APP頁面的滑動，希望對大家有用，鑒于時間精力有限，這四種模式只能從架構布局和樣式設計層面探討，關于WEBAPP性能架構及一些深層次的問題，歡迎與我交流（微博@憶龍Lau），相互學習！
相關資料：
四種架構分別來源于：攜程商旅無線2.0、攜程無線、SenchaTouch UI、攜程商旅無線3.0(Nirvana)；
JS框架工具有：zeptojs（移動端基礎框架庫），iscroll（縱向平滑滑動工具）,fastclick（快速點擊事件）,backbone（MVC架構）；
本文作者：飛柳 轉載請注明來自：攜程UED