Vue——動畫

　　動畫效果能夠提高網頁總體的「酷炫感」，而Vue中有特有的一些製做動畫效果的方法

 

原理

　　Vue裏的動畫是這樣被建立出來的：

　　1.全部須要有動畫效果的標籤，所有放在transition標籤中，transition標籤添加一個name屬性（默認值爲v）

　　2.動畫分爲進入（enter）、離開（leave）兩部分，每一部分又分爲開始（enter/leave）、中間（enter-active/leave-active）以及結束（enter-to/leave-to）

　　3.動畫開始執行時，給該元素添加上enter和enter-active兩個class（對leave也同樣）

　　4.第二幀時，元素的enter這個class被移除，enter-to這個class被添加上（對leave也同樣）

　　5.動畫執行完成後，enter-to和enter兩個標籤都被移除（對leave也同樣）

自定義class名

　　通常默認使用的enter/leave名稱爲transition名-enter這樣，若是想自定義名稱，須要在transition標籤中給其中的某個過程添加自定義class名

　　

　　以後就能夠在style標籤中用自定義的這個class名稱

　　

過渡、動畫同時使用

　　固然，也能夠在自定義class中添加上fade-enter-active，從而實現過渡和動畫效果同時添加

　　

　　可是這裏會引起問題，整個動畫和過渡的效果的時長究竟以動畫時長爲準，仍是以過渡時長爲準呢？

　　這裏能夠用transition的type屬性，後面添加animation/transition，表示總時長以動畫/過渡的時長爲準

　　

　　此外，還能夠用v-bind綁定一個duration，後面本身填寫動畫的時長（毫秒）

　　

　　這裏的duration還能夠設置得複雜一些，例如分別給入場和出場設置不一樣的時長

　　

鉤子

　　transition中能夠添加一些鉤子，在動畫的不一樣階段執行不一樣的方法

　　@before-enter：運行動畫前觸發，可接收一個參數el（transition包裹的標籤）

　　@enter：動畫運行時觸發，可接收參數el以及done（表示動畫執行完成，會當即調用after-enter內的內容）

　　@after-enter：在done觸發後當即觸發，可接收參數el，若是沒有調用done則不觸發

　　

　　

　　對於leave也有一樣的三個鉤子

 

多個元素過渡

　　 在一個transition中添加多個元素，元素之間的切換要實現過渡效果

　　

　　上面圖中是沒有過渡效果的，由於頁面會在切換DOM元素時儘量地進行複用，此時須要給兩個div添加不一樣的key

　　此外，transition中還有一個mode屬性，能夠對多個元素切換時的過渡方式設定，包括in-out（先顯示後隱藏）和out-in（先隱藏後顯示）

　　

 

多個組件過渡

　　多個組件的過渡也能夠用v-if的方法

　　

　　可是對於組件，咱們能夠用component元素，在上面用v-bind動態綁定一個變量，變量裏存儲的是組件的名稱，經過修改組件名，從而達到切換顯示和隱藏的組件的效果

　　

 

列表過渡

　　Vue中一個列表項若是想實現過渡效果，能夠把這個列表渲染的元素放入transition-group標籤中，而後再寫CSS樣式來實現過渡

　　

 

動畫封裝

　　能夠用組件的方法，把帶有過渡動畫效果的元素封裝起來，以便屢次調用

　　這裏能夠在組件的模板中添加transition標籤，內部放一個插槽，插槽上綁定改變元素顯示與否的變量

　　（這裏的slot中必須用v-if，由於實際上slot根本不是一個元素，沒有CSS中的display屬性）

　　

　　而後父組件中使用這個子組件

　　

　　固然，也能夠把動畫的效果一併封裝入組件中，這裏就須要用以前的鉤子，並用JS寫動畫的代碼來實現

　　

 

一些庫的使用

animate.css

　　這個庫上有一些現成的動畫效果，能夠直接套用到Vue中（官網連接）

　　使用前須要下載好animate.css，而後用link標籤導入

　　以後添加自定義的class名稱，在其中先添加animated這個class

　　

　　以後在官網上看須要用的動畫效果名稱，把這個名稱添加到enter/leave的自定義class中，便可實現動畫效果的調用

　　

　　

Velocity.js

　　一個能夠實現動畫效果的庫（官網連接）

　　使用的時候，結合Vue中的duration的鉤子，傳入三個參數（el、動畫中變動的css屬性、動畫時長以及最後執行done）