基于WePY2.x框架下的小程序開發實現動畫效果的彈窗組件
標題實在是不知道該怎么再進行縮減了。首先說明下是小程序開發，其次是基于WePY框架下。因為其使用類Vue語法進行小程序開發，與原生小程序開發和基于Taro框架下使用類React語法的小程序開發在語法上還是有很大區別的，所以特別強調一下。
一、前言
隨著公司小程序需求的日益上升，在假期自學了原生小程序開發以及小程序云開發。但是公司小程序工程又是基于WePY框架下進行開發的，其使用類Vue語法，方便那些習慣于用Vue框架進行前端開發的同學。所以進行WePY開發之前，還要先去學習Vue。
但是類Vue畢竟是類Vue，與本身的Vue還是有諸多不同的。在WePY1.x的時代，一眼就能看到原生小程序的影子。目前的2.x時代已經對此優化了很多，本篇文章就是基于WePY2.x下實現動畫效果的彈窗組件的，所以使用的時候一定要先注意版本。
二、代碼
里面包含了Vue、原生小程序、基于WePY框架三種實現方案。具體為什么會有3種，且往下看。
三、實現歷程
1. Vue實現
因為WePY框架下的小程序是類Vue語法，所以自然而然想到用Vue的方式去解決問題。
實現效果
實現原理
通過Vue的transition標簽+CSS3動畫屬性
實現代碼
本案例通過cdn引用而Vue，去測試實現動畫彈窗。因為只是實驗，所以并沒有使用Vue腳手架
實現邏輯
水平有限，在自己的知識區內進行解釋。具體可以看代碼
通過transition組件去監聽其下DOM的插入與移除。transition的特性就是可以給任何元素和組件添加enter/leave的過渡。詳細點說就是當DOM通過v-if或v-show顯示或隱藏時，transition會在其顯示與隱藏的過渡階段動態添加enter或者leave類。然后結合CSS3的transition屬性，去針對不同的過渡階段做動畫樣式。這點其實和React的一個動畫庫react-transition-group有異曲同工之妙，之前的一篇文章有玩過React轉場動畫，期間就使用了React這個庫。
結果
在Vue工程下，成功實現了彈窗組件。將其移植到WePY的小程序工程中，出現了問題。WePY雖然是類Vue語法，但畢竟不是真正的Vue，所以不識別transition組件~Game Over
2. 原生小程序實現
打開小程序官方文檔，發現有相關實現動畫的API
實現效果
實現原理
小程序官方API wx.createAnimation(Object object)
實現代碼
實現邏輯
水平有限，在自己的知識區內進行解釋。具體可以看代碼
創建組件時，使用wx.createAnimation初始化一個動畫實例。通過observes監聽組件的是否顯示屬性的變化。根據屬性的改變值調用動畫實例的bottom（改變哪個CSS屬性就調用動畫實例的哪個方法）函數，并傳入bottom改變的值。然后導出動畫隊列并其綁定給動畫載體（標簽）的animation屬性。
結果
WePY工程不支持原生小程序語法，最明顯的就是原生小程序通過setData手動去實現數據綁定，而WePY可以通過類Vue的v-bind進行綁定。并且兩者組件之間本身就是有很多區別的。具體可以查看WePY文檔
3. WePY小程序實現
雖然WePY不支持原生小程序的語法，但是其工程內是可以調用原生小程序的官方API的
實現效果
實現原理
小程序官方API wx.createAnimation(Object object)
實現代碼
實現邏輯
水平有限，在自己的知識區內進行解釋。具體可以看代碼
通過類Vue語法v-bind去綁定動畫載體的animation屬性，在watch下去監聽顯示與隱藏屬性的改變，然后動態去導出wx.createAnimation創建的動畫實例的動畫隊列。此時不用進行setData，因為v-bind已經自動將新的動畫隊列綁定到動畫載體上了。
結果
完美解決需求，最后的實現也確實很有意思，用的vue語法，去綁定原生小程序組件特有的animation屬性。所以印證了勇于嘗試，勇于探索是解決問題的唯一之道
四、額外補充
在三種方式封裝組件的過程中，無論哪一種都是支持solt插槽組件。所以可以將彈窗內容作為插槽，以便使用者針對業務需求擴展出更加個性化的彈窗樣式。
五、感觸
前端雖雜，但還是很有趣的。加油吧！??！
