Vue.js動畫在項目使用的兩個示例

vue.js的文檔對於動畫的使用作了不少的介紹，不熟悉的小夥伴能夠先瞭解一下。

下面就進入正題啦！

第一個動畫示例：

 

這實際上是一個很常見的彈出層效果，鼠標點擊按鈕切換彈出層的顯示，點擊其餘區域彈出層消失，用javascript綁定事件可能幾行代碼就搞定了，可是vue.js的狀態驅動模式和javascript的事件驅動模式是不一樣的，下面是使用vue.js的實現方式：

 

 

鼠標點擊button會切換一個布爾值show，用show來控制彈出層的顯示，而包裹着<transition>標籤的彈出層在show的狀態改變時就會觸發動畫，下面就能夠用css3寫一個彈出層的動畫：

 

關於不一樣的過渡狀態對應的css聲明，官網上是這樣解釋的：

v-enter: 定義進入過渡的開始狀態。在元素被插入時生效，在下一個幀移除。

v-enter-active: 定義進入過渡的結束狀態。在元素被插入時生效，在 transition/animation 完成以後移除。

v-leave: 定義離開過渡的開始狀態。在離開過渡被觸發時生效，在下一個幀移除。

v-leave-active: 定義離開過渡的結束狀態。在離開過渡被觸發時生效，在 transition/animation 完成以後移除。

相對於jQuery來講，vue.js的動畫效果徹底帶來了一種全新的體驗。

那麼如何點擊其餘區域讓彈出層消失呢？

首先想到的是直接阻止按鈕和彈出層的事件冒泡，而後給document綁定事件讓彈出層消失。可是顯然這種方法太簡單粗暴了，使用的場景也很苛刻，要求頁面中只有一個彈出層效果才行，雖然不建議使用，可是也提供了一種思路。

而後想到能夠檢驗事件的target，若是target不是按鈕和彈出層就可讓彈出層消失，這也是用jQuery 的經常使用寫法，那麼關鍵點就是用vue.js定位到按鈕和彈出層，vm.$refs能夠解決這個問題，使用 ref 爲子組件指定一個索引 ID，在 JavaScript 中就能夠直接訪問子組件了。下面是實現過程：

 

這裏定義了一個生命週期鉤子mouted，也就是說在該vue實例綁定節點以後觸發，在document綁定的事件裏判斷是否是按鈕和彈出層，若是是則返回，不然將show的狀態設置爲false。

在寫完這個以後我也去網上找了找有沒有更好的思路能夠實現，後來閱讀了一下大名鼎鼎的vue.js框架Element這部分的源碼，發現它也是這個思路實現了。你們有好的實現思路歡迎交流哈！

第二個動畫示例：

第二個實例是關於標籤頁切換的，先看一下效果：

 

這也是一個很常見的交互效果，以往正常的javascript寫法是給各個按鈕綁定事件來切換不一樣的層，固然也能夠用純css寫，給上面的三個切換的層分別添加一個單選按鈕的兄弟節點，再用絕對定位把單選按鈕定位在三個button上面，這樣就能夠用:checked僞類來單選按鈕的兄弟元素，即對應的不一樣的層，我簡單的寫了一下DOM結構，大概就是這樣：

 

那麼用vue.js實現上述的效果，其實也有兩種途徑，一種使用vue-router，vue-router是vue.js的一個路由組件，在單頁面應用中很是很是流行，若是切換的層數據量很是大的話，好比每一個層都要有服務器進行大量的數據交互，那麼強烈建議使用vue-router，由於vue-router在每次切換路由的過程當中，都會自動銷燬（destroyed）前面的組件，這樣在頻繁的操做中頁面也不會卡，並且vue-router也定義了頁面切換過程當中的過渡動畫。

若是數據量並不複雜的話，能夠直接經過vue.js定義切換狀態來切換不一樣的層。

首先先把template和css寫好：

 

其中introduce、chatbar、videobar分別表明三個須要跟隨button切換的組件，接下來就能夠給vue.js的button節點綁定事件來操控點擊狀態：

 

 

點擊不一樣的button，會讓active的狀態改變，同時這個狀態會做用到button上面，好比讓被點擊的button有個高亮的效果等等。

那麼如何讓active的狀態做用到彈出層呢？其實定義一個computed函數就能夠了：

 

 

大功告成！

好了，就說到這裏啦，第一次發這麼長的文章，貼出來的代碼可能不能面面俱到，若有不足之處，歡迎各位大神們指教，給點個贊吧啦啦啦啦！