移動端頁面製作3

12：popup

popup分為兩種：一種是內容比較多，直接以全屏顯示，一種是少量內容的popup提示

第一種形式，設計結構如下：

header>  section> ... div> footer>  span>div> div> section> 
因為這種形式內容可能會比較長，有可能會有滾動效果，所以頭部（含有關閉按鈕）採用固定，動畫設計使用translate偏移和opacity來搞定，這裡用的是從下面進入視覺範圍。通過新增刪除active這個class來控制元素顯示隱藏，
scss**如下：
.popup-page .popup-hd } } .popup-bd } }

設計結構如下：

header>  section> ... div> footer> section>div> 
這種的首先得計算定位，這次動畫採用scale和opacity來搞定，同樣通過新增刪除active這個class來控制元素顯示隱藏
.popup-over &::before }

使用transition動畫的時候，在動畫開始之前先得確保display為非none狀態，然後動畫結束之後有個transtionend事件可以呼叫，demo中的overlay的隱藏就是這個呼叫了這個事件

13:頁面切換

header> section> section> section> ... div> footer> 現在我們要設計page是左右滑動，首先得保證各個page在同一水平線上吧。使元素處在同一水平線的方法很多，float/position/flex/inlin-block等都可以，而這裡將採用絕對定位然後配合translate，具體原因大家可以自己分析下，這裡不再細說。既然page採用絕對定位，而之前的wrap-page也是採用絕對定位，所以我們有必要進一步細化下，之前我們把滾動放在wrap-page上，現在將會移動到page上，順便把之前說的header和footer部分距離一併收拾下 demo如下： css關鍵**如下，主要分為布局結構class和狀態結構class，兩者結合使用: // 整體布局 .header,.footer,.wrap-page .header,.footer .header .footer .wrap-page // page布局 // 預設有header無footer，所以top為header的高度，bottom為0 .page // layout // 無header有footer，所以page排除footer的高度，top為0，bottom為footer的高度 .page-not-footer // 有header和footer，所以page排除兩者的高度，top為header的高度，bottom為footer的高度 .page-not-header-footer // page status .page-active .page-prev .page-next

這樣我們把對header和footer的距離交給page來控制，免去了js動態增刪class，當然如果你要使用iscroll來實現滾動，那麼現在就得在page下面再巢狀一層了

下面的四種頁面滑動的動畫，均由憶龍lau實踐研究得出，我這借花獻佛。因為最後我們使用的第四種動畫，所以前三種只說下原理，感興趣的可以私下研究，這裡只提供第四種動畫的demo（當然也歡迎您來補上前三個動畫）

為了簡單起見，這裡我們暫時不研究header和footer的變化，只研究page的滾動（header和footer部分變化我們以後再說），

使用容器滾動的時候，因為設定的是wrap-page容器的translate滑動，所以就不需要page status這幾個class了，然後所有的page頁面一字排開，按照translate距離0，100%，200%，300%等差數列排開，如下圖：

主要是將要呈現的頁面的一半先覆蓋在目前頁面上並設定opacity為0，然後使用transition動畫，改變opacity及translatex為0

這種將會涉及兩個page頁面的動畫，當前頁面和即將呈現的頁面同時向左或向右偏移100%，兩者的運動頻率一樣，跟第一種容器整體滑動的效果看起來是沒什麼區別的

在第三種的基礎上提供一種視差效果，讓當前頁面的離開和即將呈現的頁面運動頻率不一致，以達到視覺上的美感

進入離去的css如下：

.page-in .page-out

關於這個demo有下面幾點需要注意：

移動端頁面製作3

移動端開發頁面布局 3

移動端網頁製作

移動端頁面布局

移動端頁面製作3

移動端開發頁面布局 3

移動端網頁製作

移動端頁面布局

相關推薦