前言
随着移动网络速率和设备硬件水平的不断提升，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中（从左到右）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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节点中)
|
1 |
-webkit-transform: translate3d(-100%, 0px, 0px); -webkit-transition: 300ms; transition: 300ms; |
二、单个页面滑动
模拟动画效果，见下图：
DEMO地址：http://nirvana.sinaapp.com/demo_slider/slider_2.html
布局方式：父容器高度100%，子容器正常文档流布局（X轴隐藏，Y轴默认原生滚动）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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;} .="crayon-cn">350ms ease-in-out;} .嵌套在android或者ios本地壳里面，也就是hybrid应用，这种开发方式所带来的优势就不多讨论，本文研究的重点是在SPA模式中，页面间横向滑动切换场景时模式是怎样设计的。在这篇文章里，笔者将展示并阐述四种横向滑动模式的架构布局及CSS设计方案，供大家参考(多图请耐心加载)。
一、容器整体滑动（DEMO只演示A-B-C-B，下同）模拟动画效果见下图(上)，滑动分解见下图(下)：
DEMO地址：http://nirvana.sinaapp.com/demo_slider/slider_1.html 布局方式：父容器相对定位并撑满整个device的viewport，子页面绝对定位并依次并排排列在viewport中（从左到右）
滑动方式：父容器利用CSS3的动画transform3D进行X轴的滑动(JS控制直接喷到DOM节点中)
二、单个页面滑动模拟动画效果，见下图：
DEMO地址：http://nirvana.sinaapp.com/demo_slider/slider_2.html 布局方式：父容器高度100%，子容器正常文档流布局（X轴隐藏，Y轴默认原生滚动）
|
