那些炫酷的特效--QQ空間+VUE

廢話，能夠跳過

在這個色彩斑斕的時代，各類app、各式各樣的特效充斥着咱們的眼球。在我看來，炫酷的特效在很大程度上是可以博取用戶的好感，提升用戶體驗的。而這些酷炫的交互方式是沒有界限的，因此一些好的app特效也能夠爲網頁所用。以此爲宗旨，我以vue爲基礎，將QQ空間的一些特效進行了重現，一來鍛鍊本身組件化開發的思惟，熟悉vue的使用，二來也是但願爲你們在一些特效的實現上提供一些思路。（本文重點討論特效的實現原理，不做任何代碼的解析）

原本是想用vue全家桶仿一個完整的QQ空間，可是寫着寫着，感受這樣作的意義其實並不大（其實就是犯懶了，還得花時間準備面試）。但又不想荒廢掉原來的代碼，因此就改吧改吧，而後作一個特效的分享。

技術棧

vuex： 沒什麼卵用，就是想證實我會用。
better-scroll：原本想用原生方法來作一些滑動的，事實證實這就是在浪費時間，由於我根本搞不定 :(

正文

彈出層特效

先講一個最簡單的特效，簡單到我都不知道要怎麼描述：

彈出層特效

最中間的+圖標是本體，點擊以後顯示一個彈層，而後播放8個圖標的動畫，控制8個圖標的速度不一樣，達到一種動態，活潑的特效。第二次點擊彈出層消失，值得注意的是彈出層必需要在動畫播放完成以後才能消失，否則效果會很突兀，因此須要用到animationend事件。

窗戶特效

這個特效恐怕沒什麼炫酷的，由於background-attachment 能夠完美實現
在此以前我是徹底不知道的，多謝指出。

我管它叫做窗戶特效，由於它給我感受就像一扇窗戶：

窗戶特效

這個特效主要作的事就使圖片在頂部能夠下拉刷新，而在向上滾動時又會跟隨滾動，通過再三思考我決定這樣實現這個效果：

真-窗戶特效

真相就是這樣0.0，兩張相同的圖片！只須要在滑動到頂部時使上層的圖片透明，就能夠輕鬆實現這個效果了。
這裏還有一個特效就是頂部的標題欄的漸變、收縮、下拉刷新的效果，故意放慢了動態圖的速度，就是想讓你們注意到它。雖然實現的邏輯很容易理解，可是真正實現仍是須要花一番功夫的，這裏用到了 做用域插槽slot將組件的狀態傳遞給slot。

可編輯導航列表

一個可編輯的導航列表，接受一組列表數據和初始須要顯示的列表長度：

可編輯導航列表

這個特效就花了我較多時間了，主要是卡在瞭如何切換彈出狀態和正常狀態，目前主要思路是--分離編輯狀態和正常狀態。具體的意思就是，給每一個項再額外添加一個 index屬性和translateY來記錄它在編輯時的序號和位移。而後在切回正常狀態時，再按照編輯後的序號從新排列每一個項，重置位移，使列表的真實序列變爲編輯後的序列，具體還有許多細節，你們想了解的話能夠去看代碼(有註釋) ( :

簡約彈框

簡約彈框

這就是一個帶有遮罩層的彈窗。值得一提的是，它是一個全局組件，能夠顯示傳入的不一樣數據，這也是惟一一個有必要用到vuex的組件。彈窗的位置是根據點擊的位置是否在屏幕的上半部分（下半部分），若是內容超過屏幕的一半--我也不知道會發生什麼，反正不會好看就是了。最後那個小角就是一個旋轉的小正方形：)

廢話

此次的QQ空間特效分享就結束了，還有一些小特效沒有實現，而且本來想解決一下移動端軟鍵盤的問題的，最後仍是不了了之（懶癌又犯了）。這是代碼，你們拿去玩吧，萬一玩出個什麼bug就能夠回來噴我了，反正我也不會鳥：>
QQ、郵箱：774061539--無業遊民