寫在前面
最近看到一個非常酷炫的menu外掛，一直想把它鼓搗成vue形式，誰讓我是vue的死灰粉呢，如果這都不算愛?。?開個小玩耍，我們一起來探索黑魔法吧。觀看本教程的讀者需要具備一定的vue和css3的知識.
本文結構
1.效果演示
2.使用方法介紹
3.關鍵步驟講解
正文
1.效果演示
pic_1
pic2
pic_3
線上演示live demo
2.使用介紹
專案地址:github.com/MingSeng-W/vue-bloom-menu,clone專案到本地
a. 首先在單檔案元件裡引入menu元件，匯入common資料夾stylus裡的menuConfig.stylus.
b.配置相應的引數
可選引數
* radius：default為100px,item距離menu的button的距離。
* startAngle:defaut為0，item開始的角度，以時鐘3點鐘方向記為0，然後順時針方向為遞增方向。
* endAngle:default為315，最後一個item的角度。
* itemNum:default為8
* animationDuration:default為0.5s，每個item動畫的執行時間
* itemAnimationDelay:default為0.04s,每個item之間animation觸發的間隔延遲時間
必選引數
* iconImgArr
import您需要的icon,然後生成iconImgArr（computed屬性繫結），作為props傳給menu元件
menu的位置
目前有center,corner兩種位置，在menu的class裡指定。center的class:.menu-center-wrapper
corner的class:.menu-left-corner-wrapper。當然自己指定位置也是ok的。
一個簡單的example
demo
3.關鍵步驟講解
整個menu的實現關鍵在於計算menu展開後最後的座標，以及展開與收縮的動畫.（由於整個專案佈局比較簡單，所以這裡主要講解邏輯和動畫的實現）
第一步：計算menu展開後橫座標和縱座標
下面的x,y分別表示item在頁面的位置,以x為例。
x：原始的位置，x2最後展開的位置，x1中間的過渡位置(主要是造成一個“拉回”的效果)，以下是圖片解釋,為了解釋簡單明瞭，我放大了radius倍數以及增加了動畫的執行時間。
位置解釋
位置的計算：首先計算每個item之間的夾角,起始item是沿著順時針佈局的，每個item之間的夾角等於(endAngle-startAngle)/(itemNum-1)。當前item應該旋轉的角度為：angleCur=startAngle+index*每個item之間的夾角。得到item的旋轉角度之後，用Math.cos和Math.sin和radius相乘得到其橫座標和縱座標.
關鍵程式碼:
計算每個item的夾角
位置解釋
第二步，根據生成的座標使用js動態生成animtion,並插入到樣式檔案中。
生成展開和收縮的keyframe
到這一步我們完成了點選menu展開與收縮。
第二步，完成點選item之後item放大與消失，其他的item縮小與消失
item消失的keyframe
item消失的keyframe
這裡觸發動畫使用vue提供transition ，當元素的v-show為false時，也就是display為none時，觸發動畫。
每個item動畫完成後都會觸發animationEnd事件，監聽item的animationEnd事件，當所有動畫依次觸發完畢之後，提醒menu置於關閉狀態（父子元件通訊 ）。
我在menu元件裡使用v-on監聽animationEnd事件，item自己的動畫執行後,通過$emit觸發animationEnd事件，通知menu的動畫計數count++,當count達到總的專案數的時候,menu進行關閉.
code
code
再次開啟menu的時候檢查與item繫結的showItem是否為false,是的話置為true。點選時需要拿到被點選item的index,得到全域性的currentIndex即被點選的item的index。被點中的使用放大動畫，否則使用縮小動畫。
pic_6
關鍵程式碼
至此所有步驟講解完畢