李萌，16年畢業，Web前端開發從業者，目前就職于騰訊，喜歡node.js、vue.js等技術，熱愛新技術，熱愛程式設計。
<code>vue.js</code>的文檔對于動畫的使用做了很多的介紹，不熟悉的小夥伴可以先了解一下。
下面就進入正題啦！
這其實是一個很常見的彈出層效果，滑鼠點選按鈕切換彈出層的顯示，點選其他區域彈出層消失，用javascript綁定事件可能幾行代碼就搞定了，但是<code>vue.js</code>的狀态驅動模式和javascript的事件驅動模式是不同的，下面是使用<code>vue.js</code>的實作方式：
滑鼠點選button會切換一個布爾值show，用show來控制彈出層的顯示，而包裹着<code><transition></code>标簽的彈出層在show的狀态改變時就會觸發動畫，下面就可以用css3寫一個彈出層的動畫：
關于不同的過渡狀态對應的css聲明，官網上是這樣解釋的：
<code>v-enter</code>: 定義進入過渡的開始狀态。在元素被插入時生效，在下一個幀移除。
<code>v-enter-active</code>: 定義進入過渡的結束狀态。在元素被插入時生效，在 transition/animation 完成之後移除。
<code>v-leave</code>: 定義離開過渡的開始狀态。在離開過渡被觸發時生效，在下一個幀移除。
<code>v-leave-active</code>: 定義離開過渡的結束狀态。在離開過渡被觸發時生效，在 transition/animation 完成之後移除。
相對于jQuery來說，<code>vue.js</code>的動畫效果完全帶來了一種全新的體驗。
那麼如何點選其他區域讓彈出層消失呢？
首先想到的是直接阻止按鈕和彈出層的事件冒泡，然後給document綁定事件讓彈出層消失。但是顯然這種方法太簡單粗暴了，使用的場景也很苛刻，要求頁面中隻有一個彈出層效果才行，雖然不建議使用，但是也提供了一種思路。
然後想到可以檢驗事件的target，如果target不是按鈕和彈出層就可以讓彈出層消失，這也是用jQuery 的常用寫法，那麼關鍵點就是用<code>vue.js</code>定位到按鈕和彈出層，<code>vm.$refs</code>可以解決這個問題，使用 ref 為子元件指定一個索引 ID，在 JavaScript 中就可以直接通路子元件了。下面是實作過程：
這裡定義了一個生命周期鈎子mouted，也就是說在該vue執行個體綁定節點之後觸發，在document綁定的事件裡判斷是不是按鈕和彈出層，如果是則傳回，否則将show的狀态設定為false。
在寫完這個之後我也去網上找了找有沒有更好的思路可以實作，後來閱讀了一下大名鼎鼎的<code>vue.js</code>架構Element這部分的源碼，發現它也是這個思路實作了。大家有好的實作思路歡迎交流哈！
第二個執行個體是關于标簽頁切換的，先看一下效果：
這也是一個很常見的互動效果，以往正常的javascript寫法是給各個按鈕綁定事件來切換不同的層，當然也可以用純css寫，給上面的三個切換的層分别添加一個單選按鈕的兄弟節點，再用絕對定位把單選按鈕定位在三個button上面，這樣就可以用:checked僞類來單選按鈕的兄弟元素，即對應的不同的層，我簡單的寫了一下DOM結構，大概就是這樣：
那麼用<code>vue.js</code>實作上述的效果，其實也有兩種途徑，一種使用<code>vue-router</code>，<code>vue-router</code>是<code>vue.js</code>的一個路由元件，在單頁面應用中非常非常流行，如果切換的層資料量非常大的話，比如每個層都要有伺服器進行大量的資料互動，那麼強烈建議使用<code>vue-router</code>，因為<code>vue-router</code>在每次切換路由的過程中，都會自動銷毀（destroyed）前面的元件，這樣在頻繁的操作中頁面也不會卡，而且<code>vue-router</code>也定義了頁面切換過程中的過渡動畫。
如果資料量并不複雜的話，可以直接通過<code>vue.js</code>定義切換狀态來切換不同的層。
首先先把template和css寫好：
其中introduce、chatbar、videobar分别代表三個需要跟随button切換的元件，接下來就可以給<code>vue.js</code>的button節點綁定事件來操控點選狀态：
點選不同的button，會讓active的狀态改變，同時這個狀态會作用到button上面，比如讓被點選的button有個高亮的效果等等。
那麼如何讓active的狀态作用到彈出層呢？其實定義一個computed函數就可以了：
大功告成！
好了，就說到這裡啦，第一次發這麼長的文章，貼出來的代碼可能不能面面俱到，如有不足之處，歡迎各位大神們指教，給點個贊吧啦啦啦啦！