廢話，可以跳過
在這個色彩斑斕的時代，各種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–無業遊民