初爱视频教程,无码视频一区二区三区在线观看,大吊干小穴视频,jizzjizz日本高潮喷水

前言

隨著移動(dòng)網(wǎng)絡(luò)速率和設(shè)備硬件水平的不斷提升，webapp的發(fā)展更加的native化，其表現(xiàn)效果和性能也會(huì)越來越好，在可預(yù)計(jì)的未來很有可能替代native或者平起平坐，那么我們研究更好的交互體驗(yàn)是非常有必要的。

目前我們所常見的webapp越來越多的是以SPA(single page application)的模式進(jìn)行開發(fā)，同時(shí)嵌套在android或者ios本地殼里面，也就是hybrid應(yīng)用，這種開發(fā)方式所帶來的優(yōu)勢(shì)就不多討論，本文研究的重點(diǎn)是在SPA模式中，頁(yè)面間橫向滑動(dòng)切換場(chǎng)景時(shí)模式是怎樣設(shè)計(jì)的。在這篇文章里，筆者將展示并闡述四種橫向滑動(dòng)模式的架構(gòu)布局及CSS設(shè)計(jì)方案，供大家參考(多圖請(qǐng)耐心加載)。

一、容器整體滑動(dòng)（DEMO只演示A-B-C-B，下同）

模擬動(dòng)畫效果見下圖(上)，滑動(dòng)分解見下圖(下)：

DEMO地址：http://nirvana.sinaapp.com/demo_slider/slider_1.html

布局方式：父容器相對(duì)定位并撐滿整個(gè)device的viewport，子頁(yè)面絕對(duì)定位并依次并排排列在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 { // 子頁(yè)面布局方式   position: absolute;   z-index: 1;   top: 0;   left: 0; // 初始化為0，動(dòng)態(tài)計(jì)算第N個(gè)page，并賦值(N-1)*100%   width: 100%;   height: 100%;   overflow: hidden;   background-color: #F8F8F8; }

滑動(dòng)方式：父容器利用CSS3的動(dòng)畫transform3D進(jìn)行X軸的滑動(dòng)(JS控制直接噴到DOM節(jié)點(diǎn)中)

-webkit-transform: translate3d(-100%, 0px, 0px); -webkit-transition: 300ms; transition: 300ms;

二、單個(gè)頁(yè)面滑動(dòng)

模擬動(dòng)畫效果，見下圖：

DEMO地址：http://nirvana.sinaapp.com/demo_slider/slider_2.html

布局方式：父容器高度100%，子容器正常文檔流布局（X軸隱藏，Y軸默認(rèn)原生滾動(dòng)）

.view-container {   height: 100%; } .page-container {   position: relative;   width: 100%;   min-height: 100%;   overflow-x: hidden;   background-color: #F8F8F8; }

滑動(dòng)方式：利用class添加動(dòng)畫樣式（keyframes animation），左右進(jìn)出各一種

  @-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}

三、雙頁(yè)聯(lián)動(dòng)滑動(dòng)

模擬動(dòng)畫效果，見下圖：

DEMO地址：http://nirvana.sinaapp.com/demo_slider/slider_3.html

布局方式：類似于第一種，父容器和子容器都絕對(duì)定位于viewport中，不同點(diǎn)是父類的上級(jí)布局更加細(xì)分，且大膽使用了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; }

滑動(dòng)方式：滑動(dòng)開始時(shí)先將隱藏的下一個(gè)子頁(yè)面拉到viewport右側(cè)與當(dāng)前子頁(yè)面平行，然后緊接著兩個(gè)子頁(yè)面同步滑動(dòng)，最后回歸樣式，中間的時(shí)間差事件均有JS控制（詳見demo邏輯）

四、三舞臺(tái)雙頁(yè)視差滑動(dòng)

模擬動(dòng)畫效果見下圖（上），分解邏輯圖見下圖（下）：

DEMO地址：http://nirvana.sinaapp.com/demo_slider/slider_4.html

布局方式：這里我設(shè)定了三舞臺(tái)(stage)的概念，其實(shí)就是當(dāng)前viewport的左右側(cè)各虛擬一個(gè)同樣大小的viewport，當(dāng)然，正常情況下我們只能看到當(dāng)前舞臺(tái)的子頁(yè)面，leftstage是-100%的位置，rightstage是100%的位置，我們分別用三個(gè)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%);   } }

滑動(dòng)方式：
1，定義正向（向左滑）和反向（向右滑）兩個(gè)概念,；
2，定義快速和慢速兩個(gè)概念；
則就是四種動(dòng)態(tài)兩種組合：正向快速+正向慢速、反向快速+反向慢速；

.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;

營(yíng)銷型網(wǎng)站建設(shè)